利用jsPDF實現(xiàn)將圖片轉(zhuǎn)為pdf
更新時間：2023年08月13日 10:23:35 作者：Ann_R
這篇文章主要為大家詳細介紹了如何利用jsPDF實現(xiàn)將圖片轉(zhuǎn)為pdf的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下
安裝依賴并引入
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格式的文件需要通過安裝依賴
“tiff.js”: “^1.0.0”,
也是使用arrayBuffer，將圖片格式轉(zhuǎn)為base64，（jpg/jpeg格式，然后將該格式通過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)，可以通過設(shè)置圖片的最大寬度來控制圖片自適應(yīng)的大小
const imageWidth = 100;
注意五、
因為異步任務(wù)執(zhí)行可能導(dǎo)致批量選擇文件的順序與實際獲得的文件順序不一致，所以獲取到的this.pdfFileArr，需要通過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)化后再進行 圖片轉(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ù)寬度等比例計算高度
const img = new Image();
img.src = imgUrl
let finalWidth = imageWidth;
let finalHeight = imageHeight;
img.onload = function () {
const width = img.width;
const height = img.height;
// 計算圖片適應(yīng) PDF 頁面的尺寸
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')
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('錯誤信息為：'+error)
})
promises.push(promise);
})
return Promise.all(promises)
},合并pdf代碼
async mergePdf(sortList) {
console.log('最終需要合并的pdf數(shù)組', sortList)
let files = sortList
// 創(chuàng)建一個新的PDF文檔
const mergedPdf = await PDFDocument.create();
// 遍歷選擇的每個文件
for (let i = 0; i < files.length; i++) {
/**
這里為.pdf 文件的遍歷操作
通過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("文件讀取錯誤。"));
};
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 -->如果自己編寫打印接口，可以通過id獲取到該iframe，調(diào)起 contentWindow.print() 即可打印該dom元素
document.getElementById('printIframe').contentWindow.print();到此這篇關(guān)于利用jsPDF實現(xiàn)將圖片轉(zhuǎn)為pdf的文章就介紹到這了,更多相關(guān)jsPDF圖片轉(zhuǎn)pdf內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript prototype屬性,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
關(guān)于恒等于（===）和非恒等于（!==）...2007-08-08
這篇文章主要介紹了在前端開發(fā)中判斷用戶登錄狀態(tài)是否過期的方法,包括檢查令牌有效期、定時輪詢服務(wù)器、全局請求攔截器和利用Web存儲中的時間戳,文章還討論了在特定場景下如何實現(xiàn)優(yōu)雅降級,以避免中斷用戶操作,需要的朋友可以參考下2024-11-11
本篇文章主要介紹了Js實現(xiàn)京東無延遲菜單效果實例(demo) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本文為大家講解下JS的千分位算法的具體實現(xiàn)，先去除空格,判斷是否空值和非數(shù)；針對是否有小數(shù)點，分情況處理；感興趣的朋友可以參考下2013-07-07
JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù)，數(shù)組扁平化又稱數(shù)組降維，下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下2021-12-12
本文章來給大家推薦一個不錯的鼠標(biāo)經(jīng)過顯示二級菜單js特效效果，有需要了解的朋友可以參考一下2013-08-08
JavaScript常用基礎(chǔ)知識強化學(xué)習(xí)
這篇文章主要介紹了JavaScript常用基礎(chǔ)知識強化學(xué)習(xí)，需要的朋友可以參考下2015-12-12
這篇文章主要介紹了Javascript操作select控件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
下面小編就為大家?guī)硪黄趧蛩龠\動的實例講解(側(cè)邊欄,淡入淡出)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10