安裝依賴并引入

import jsPDF from 'jspdf';
import { PDFDocument,  } from 'pdf-lib';

注意一、
使用jspdf將圖片（jpg/jpeg/png/bmp）轉(zhuǎn)pdf（記為pdfA），得到的pdf（pdfA）和需要合并的pdf(記為pdfB)類型不一致，需要將pdfA轉(zhuǎn)為pdfB類型，才能合并，使用arraybuffer轉(zhuǎn)，具體如下

// pdf--pdfA--是使用jspdf將圖片生成的pdf
// file--pdfB--是合并pdf需要的pdf格式
const jsPdfBytes = pdf.output('arraybuffer');
const file = await PDFDocument.load(jsPdfBytes);

注意二、
jspdf 可轉(zhuǎn)pdf的圖片類型有jpg、jpeg、png、bpm，
不支持 tif 和 tiff 圖片類型

.tif和.tiff格式的文件需要通過(guò)安裝依賴
“tiff.js”: “^1.0.0”,
也是使用arrayBuffer，將圖片格式轉(zhuǎn)為base64，（jpg/jpeg格式，然后將該格式通過(guò)jspdf轉(zhuǎn)為pdf文件）

if(x.FILE_TYPE == '.tif' || x.FILE_TYPE == '.tiff' ){
     const response = await fetch(imgUrl);
     const buffer = await response.arrayBuffer();
     const Tiff = require("tiff.js");
     const tiff = new Tiff({ buffer });
     imgUrl = tiff.toDataURL();
}

注意三、
async/await 和 new Promise 控制異步任務(wù)順序執(zhí)行，執(zhí)行完imgToPdf()方法，再執(zhí)行合并pdf 方法

注意四、
jspdf 將圖片轉(zhuǎn)為pdf，注意圖片大小的自適應(yīng)，可以通過(guò)設(shè)置圖片的最大寬度來(lái)控制圖片自適應(yīng)的大小
const imageWidth = 100;

注意五、
因?yàn)楫惒饺蝿?wù)執(zhí)行可能導(dǎo)致批量選擇文件的順序與實(shí)際獲得的文件順序不一致，所以獲取到的this.pdfFileArr，需要通過(guò)id 調(diào)整為正確的pdf文件打印順序

圖片轉(zhuǎn)pdf代碼：

async imgToPdf(arr) {
      const promises = [];
      
      arr.forEach(async (x)=>{
        const promise = new Promise(async (resolve,reject)=>{
          //jsPdf 僅支持JPG/JPEG/PNG/BMP格式,不支持tif
          let id = x.ID
          let imgUrl = window.URL.createObjectURL(x.FILE)
          //如果是tif或者tiff文件，需要轉(zhuǎn)化后再進(jìn)行 圖片轉(zhuǎn)pdf操作
          if(x.FILE_TYPE == '.tif' || x.FILE_TYPE == '.tiff' ){
            const response = await fetch(imgUrl);
            const buffer = await response.arrayBuffer();
            const Tiff = require("tiff.js");
            const tiff = new Tiff({ buffer });
            imgUrl = tiff.toDataURL();
          }
          const pdf = new jsPDF();
          //添加header
          //pdf.text('PDF Header', 10, 10);
          // 將圖片繪制到pdf中
          const imageWidth = 100; // 設(shè)定圖片的最大寬度
          const imageHeight = 0; // 設(shè)置為 0，將根據(jù)寬度等比例計(jì)算高度

          const img = new Image();
          img.src = imgUrl
          
          let finalWidth = imageWidth;
          let finalHeight = imageHeight;

          img.onload = function () {
            const width = img.width;
            const height = img.height;
            
            // 計(jì)算圖片適應(yīng) PDF 頁(yè)面的尺寸
            const aspectRatio = width / height;
            
            if (finalHeight === 0) {
              finalHeight = finalWidth / aspectRatio;
            } else if (finalWidth === 0) {
              finalWidth = finalHeight * aspectRatio;
            }
            
          };
          // 添加圖片到 PDF
          //pdf.addImage(imgUrl, 'JPEG', 10, 10, finalWidth, finalHeight, null, 'SLOW')
          //圖片居中顯示
          pdf.addImage(imgUrl, 'JPEG', (pdf.internal.pageSize.getWidth() - finalWidth) / 2, 20, finalWidth, finalHeight, null, 'SLOW')



          const jsPdfBytes = pdf.output('arraybuffer');
          const file = await PDFDocument.load(jsPdfBytes);
        
          //const blob = new Blob([file], { type: 'application/PDF' })
        
          let obj = {
            ID: id,
            FILE: file
          }
          console.log("執(zhí)行了------imgToPdf")
          resolve(obj)

        }).then((obj)=>{
          this.pdfFileArr.push(obj)
        }).catch((error)=>{
          this.loadLoading = false
          alert('錯(cuò)誤信息為：'+error)
        })

        promises.push(promise);
      })

      return Promise.all(promises)
    },

合并pdf代碼

async mergePdf(sortList) {
      console.log('最終需要合并的pdf數(shù)組', sortList)
      let files = sortList
      // 創(chuàng)建一個(gè)新的PDF文檔
      const mergedPdf = await PDFDocument.create();
      // 遍歷選擇的每個(gè)文件
      for (let i = 0; i < files.length; i++) {
       /**
		這里為.pdf 文件的遍歷操作
		通過(guò)FileReader 讀取.pdf文件，轉(zhuǎn)為合并pdf所需要的pdf類型
        const file = files[i];
        const url = window.URL.createObjectURL(file)
        const reader = new FileReader();
        // 讀取文件內(nèi)容
        const fileContents = await new Promise((resolve, reject) => {
          reader.onload = function (event) {
            resolve(event.target.result);
          };
          reader.onerror = function (event) {
            reject(new Error("文件讀取錯(cuò)誤。"));
          };
          reader.readAsArrayBuffer(file); //blob
        });
        // 將PDF文件添加到合并的PDF文檔中
        const pdf = await PDFDocument.load(fileContents);

        console.log("合并pdf---", pdf)
        **/

        const pdf = files[i];

        const copiedPages = await mergedPdf.copyPages(
          pdf,
          pdf.getPageIndices()
        );
        copiedPages.forEach((page) => {
          mergedPdf.addPage(page);
        });

        
      }

      const uint8Array = await mergedPdf.save();
      let mergeBuffer = Buffer.from(uint8Array);

      const url = window.URL.createObjectURL(new Blob([mergeBuffer], { type: 'application/pdf;charset=utf-8' }));
      this.mergePdfUrl = url

      console.log("pdf合并完成")
      console.log("新合并的pdf--", url)
      console.log("新合并的pdf--", mergedPdf)

    },

將獲得的pdf文件url給iframe即可預(yù)覽，iframe 自帶toolbar工具欄打印

<iframe ref="printPdf"  id="printIframe" 
            style="overflow:hidden;filter: Chroma(Color=white);border: none;width: 100%; height: 100%"
            :src="item.url + '#toolbar=0'"></iframe>
            <!-- #view=FitH,top -->

如果自己編寫打印接口，可以通過(guò)id獲取到該iframe，
調(diào)起 contentWindow.print() 即可打印該dom元素文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-639737.html

document.getElementById('printIframe').contentWindow.print();

到了這里，關(guān)于批量打印-----jsPDF將圖片轉(zhuǎn)為pdf，并合并pdf的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！