//我的需求里只用到這么多就夠了，其他的按需引入
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib';

import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib';
 
// This should be a Uint8Array or ArrayBuffer
// This data can be obtained in a number of different ways
// If your running in a Node environment, you could use fs.readFile()
// In the browser, you could make a fetch() call and use res.arrayBuffer()
const existingPdfBytes = ...
 
// Load a PDFDocument from the existing PDF bytes
const pdfDoc = await PDFDocument.load(existingPdfBytes)
 
// Embed the Helvetica font
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
 
// Get the first page of the document
const pages = pdfDoc.getPages()
const firstPage = pages[0]
 
// Get the width and height of the first page
const { width, height } = firstPage.getSize()
 
// Draw a string of text diagonally across the first page
firstPage.drawText('This text was added with JavaScript!', {
  x: 5,
  y: height / 2 + 300,
  size: 50,
  font: helveticaFont,
  color: rgb(0.95, 0.1, 0.1),
  rotate: degrees(-45),
})
 
 
// Serialize the PDFDocument to bytes (a Uint8Array)
const pdfBytes = await pdfDoc.save()
 
// For example, `pdfBytes` can be:
//   ? Written to a file in Node
//   ? Downloaded from the browser
//   ? Rendered in an <iframe>

import { PDFDocument } from 'pdf-lib'
 
// These should be Uint8Arrays or ArrayBuffers
// This data can be obtained in a number of different ways
// If your running in a Node environment, you could use fs.readFile()
// In the browser, you could make a fetch() call and use res.arrayBuffer()
const jpgImageBytes = ...
const pngImageBytes = ...
 
// Create a new PDFDocument
const pdfDoc = await PDFDocument.create()
 
// Embed the JPG image bytes and PNG image bytes
const jpgImage = await pdfDoc.embedJpg(jpgImageBytes)
const pngImage = await pdfDoc.embedPng(pngImageBytes)
 
// Get the width/height of the JPG image scaled down to 25% of its original size
const jpgDims = jpgImage.scale(0.25)
 
// Get the width/height of the PNG image scaled down to 50% of its original size
const pngDims = pngImage.scale(0.5)
 
// Add a blank page to the document
const page = pdfDoc.addPage()
 
// Draw the JPG image in the center of the page
page.drawImage(jpgImage, {
  x: page.getWidth() / 2 - jpgDims.width / 2,
  y: page.getHeight() / 2 - jpgDims.height / 2,
  width: jpgDims.width,
  height: jpgDims.height,
})
 
// Draw the PNG image near the lower right corner of the JPG image
page.drawImage(pngImage, {
  x: page.getWidth() / 2 - pngDims.width / 2 + 75,
  y: page.getHeight() / 2 - pngDims.height,
  width: pngDims.width,
  height: pngDims.height,
})
 
// Serialize the PDFDocument to bytes (a Uint8Array)
const pdfBytes = await pdfDoc.save()
 
// For example, `pdfBytes` can be:
//   ? Written to a file in Node
//   ? Downloaded from the browser
//   ? Rendered in an <iframe>

import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib';
/**
 * 瀏覽器打開新頁(yè)簽預(yù)覽pdf
 * blob（必選）: pdf文件信息（Blob對(duì)象）【Blob】
 * docTitle（可選）: 瀏覽器打開新頁(yè)簽的title  【String】
 * isAddWatermark（可選，默認(rèn)為false）: 是否需要添加水印 【Boolean】
 * watermark（必選）：水印信息 【Object: { type: string, text: string, image:{ bytes: ArrayBuffer, imageType: string } }】
 * watermark.type（可選）：類型 可選值：text、image、canvas
 * watermark.text（watermark.type為image時(shí)不填，否則必填）：水印文本。注意：如果watermark.type值為text，text取值僅支持拉丁字母中的218個(gè)字符。詳見：https://www.npmjs.com/package/pdf-lib
 * watermark.image（watermark.type為image時(shí)必填，否則不填）：水印圖片
 * watermark.image.bytes：圖片ArrayBuffer
 * watermark.image.imageType：圖片類型?？蛇x值：png、jpg
 * Edit By WFT
 */
export default class PreviewPdf {
  constructor({ blob, docTitle, isAddWatermark = false, watermark: { type = 'text', text = 'WFT', image } }) {
    const _self = this
    if(!blob) {
      return console.error('[PDF Blob Is a required parameter]')
    }
    if(!isAddWatermark) { // 不添加水印
      _self.preView(blob, docTitle)
    } else {
      let bytes,imageType
      if(type == 'image') {
        if(!image) {
          return console.error('["image" Is a required parameter]')
        }
        bytes = image.bytes
        imageType = image.imageType
      }
      const map = {
        'text': _self.addTextWatermark.bind(_self),
        'image': _self.addImageWatermark.bind(_self),
        'canvas': _self.addCanvasWatermark.bind(_self)
      }
      blob.arrayBuffer().then(async buffer => {
        const existingPdfBytes = buffer
        const pdfDoc = await PDFDocument.load(existingPdfBytes)
        let params
        if(type == 'text') params = { pdfDoc, text, docTitle }
        if(type == 'image') params = { pdfDoc, bytes, imageType, docTitle }
        if(type == 'canvas') params = { pdfDoc, text, docTitle }
        map[type](params)
      }).catch(e => console.error('[Preview Pdf Error]:', e))
    }
  }
 
  // 添加 Text 水印
  async addTextWatermark({ pdfDoc, text, docTitle }) {
    // console.log(StandardFonts, 'StandardFonts-->>') // 字體
    const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
    const pages = pdfDoc.getPages()
    for(let i = 0; i < pages.length; i++) {
      let page = pages[i]
      let { width, height } = page.getSize()
      for(let i = 0; i < 6; i++) {
        for(let j = 0; j < 6; j++) {
          page.drawText(text, {
            x: j * 100,
            y: height / 5 + i * 100,
            size: 30,
            font: helveticaFont,
            color: rgb(0.95, 0.1, 0.1),
            opacity: 0.2,
            rotate: degrees(-35),
          })
        }
      }
    }
    // 序列化為字節(jié)
    const pdfBytes = await pdfDoc.save()
    this.preView(pdfBytes, docTitle)
  }
 
  // 添加 image 水印
  async addImageWatermark({ pdfDoc, bytes, imageType, docTitle }) {
    // 嵌入JPG圖像字節(jié)和PNG圖像字節(jié)
    let image
    const maps = {
      'jpg': pdfDoc.embedJpg.bind(pdfDoc),
      'png': pdfDoc.embedPng.bind(pdfDoc)
    }
    image = await maps[imageType](bytes)
    // 將JPG圖像的寬度/高度縮小到原始大小的50%
    const dims = image.scale(0.5)
    const pages = pdfDoc.getPages()
    for(let i = 0; i < pages.length; i++) {
      let page = pages[i]
      let { width, height } = page.getSize()
      for(let i = 0; i < 6; i++) {
        for(let j = 0; j < 6; j++) {
          page.drawImage(image, {
            x: width / 5 - dims.width / 2 + j * 100,
            y: height / 5 - dims.height / 2 + i * 100,
            width: dims.width,
            height: dims.height,
            rotate: degrees(-35)
          })
        }
      }
    }
    // 序列化為字節(jié)
    const pdfBytes = await pdfDoc.save()
    this.preView(pdfBytes, docTitle)
  }
 
  // 添加 canvas 水印
  addCanvasWatermark({ pdfDoc, text, docTitle }) {
    // 旋轉(zhuǎn)角度大小
    const rotateAngle = Math.PI / 6;
 
    // labels是要顯示的水印文字，垂直排列
    let labels = new Array();
    labels.push(text);
 
    const pages = pdfDoc.getPages()
 
    const size = pages[0].getSize()
 
    let pageWidth = size.width
    let pageHeight = size.height
 
    let canvas = document.createElement('canvas');
    let canvasWidth = canvas.width = pageWidth;
    let canvasHeight = canvas.height = pageHeight;
 
    const context = canvas.getContext('2d');
    context.font = "15px Arial";
 
    // 先平移到畫布中心
    context.translate(pageWidth / 2, pageHeight / 2 - 250);
    // 在繞畫布逆方向旋轉(zhuǎn)30度
    context.rotate(-rotateAngle);
    // 在還原畫布的坐標(biāo)中心
    context.translate(-pageWidth / 2, -pageHeight / 2);
 
    // 獲取文本的最大長(zhǎng)度
    let textWidth = Math.max(...labels.map(item => context.measureText(item).width));
 
    let lineHeight = 15, fontHeight = 12, positionY, i
    i = 0, positionY = 0
    while (positionY <= pageHeight) {
      positionY = positionY + lineHeight * 5
      i++
    }
    canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 給canvas加上畫布向左偏移的最大距離
    canvasHeight = 2 * canvasHeight
    for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
      // 進(jìn)行畫布偏移是為了讓畫布旋轉(zhuǎn)之后水印能夠左對(duì)齊;
      context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
      for (let positionX = 0; positionX < canvasWidth; positionX += 2 * textWidth) {
        let spacing = 0;
        labels.forEach(item => {
          context.fillText(item, positionX, positionY + spacing);        
          context.fillStyle = 'rgba(187, 187, 187, .8)'; // 字體顏色
          spacing = spacing + lineHeight;
        })
      }
      context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
      context.restore();
      i++
    }
    // 圖片的base64編碼路徑
    let dataUrl = canvas.toDataURL('image/png');
    // 使用Xhr請(qǐng)求獲取圖片Blob
    let xhr = new XMLHttpRequest();
    xhr.open("get", dataUrl, true);
    xhr.responseType = "blob";
    xhr.onload = res => {
      const imgBlob = res.target.response
      // 獲取Blob圖片Buffer
      imgBlob.arrayBuffer().then(async buffer => {
        const pngImage = await pdfDoc.embedPng(buffer)
        for(let i = 0; i < pages.length; i++) {
          pages[i].drawImage(pngImage)
        }
        // 序列化為字節(jié)
        const pdfBytes = await pdfDoc.save()
        this.preView(pdfBytes, docTitle)
      })
    }
    xhr.send();
  }
 
  // 預(yù)覽
  preView(stream, docTitle) {
    const URL = window.URL || window.webkitURL;
    const href = URL.createObjectURL(new Blob([stream], { type: 'application/pdf;charset=utf-8' }))
    const wo = window.open(href)
    // 設(shè)置新打開的頁(yè)簽 document title
    let timer = setInterval(() => {
      if(wo.closed) {
        clearInterval(timer)
      } else {
        wo.document.title = docTitle
      }
    }, 500)
  }
}