使用JavaScript將圖片合并為PDF的實現(xiàn)
更新時間：2024年07月02日 09:34:17 作者：xulihang
在日常工作中,我們可能需要拍攝一些照片并將圖像合并到PDF文件中,這可以通過許多應用來完成,Dynamsoft Document Viewer讓這一操作更加方便,在本文中,我們將使用Dynamsoft Document Viewer創(chuàng)建一個Web應用,用JavaScript將圖像合并到PDF中,需要的朋友可以參考下
介紹
在日常工作中，我們可能需要拍攝一些照片并將圖像合并到PDF文件中。這可以通過許多應用來完成。Dynamsoft Document Viewer讓這一操作更加方便，因為它可以在瀏覽器中執(zhí)行?？梢约稍摬僮鞯轿覀兊脑诰€網站、CRM系統(tǒng)中。
在本文中，我們將使用Dynamsoft Document Viewer創(chuàng)建一個Web應用，用JavaScript將圖像合并到PDF中。
新建HTML文件
創(chuàng)建一個包含以下模板的新HTML文件。
<!DOCTYPE html> <html> <head> <title>Document Scanner</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <style> </style> </head> <body> <h2>Merge Images into PDF</h2> <script> </script> </body> </html>
添加依賴項
在頁面中包含Dynamsoft Document Viewer。
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.js"></script> <link rel="stylesheet" rel="external nofollow" >
選擇文件
接下來，選擇要合并的文件。
添加用于選擇多個文件的input元素。
<input type="file" name="file" id="file" multiple="multiple">
然后，我們可以使用以下JavaScript獲取所選文件：
let fileInput = document.getElementById("file");
let files = fileInput.files;
將圖像合并為PDF
在頁面中添加按鈕以執(zhí)行合并圖像到PDF的操作。
HTML：
<button onclick="merge()">Merge into PDF</button>
JavaScript：
使用許可證初始化Dynamsoft Document Viewer。可以在此處申請許可證。
Dynamsoft.DDV.Core.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; // Public trial license which is valid for 24 hours
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/engine";// Lead to a folder containing the distributed WASM files
await Dynamsoft.DDV.Core.loadWasm();
await Dynamsoft.DDV.Core.init();
Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
使用Dynamsoft Document Viewer的DocumentManager創(chuàng)建新的文檔實例。
const doc = Dynamsoft.DDV.documentManager.createDocument();
以blob格式讀取文件并將其加載到文檔中。
let fileInput = document.getElementById("file");
let files = fileInput.files;
for (let index = 0; index < files.length; index++) {
const file = files[index];
const source = await readFileAsBlob(file);
try {
await doc.loadSource(source);
} catch (error) {
console.log(error);
}
}
function readFileAsBlob(file){
return new Promise((resolve, reject) => {
let fileReader = new FileReader();
fileReader.onload = function(e){
const blob = new Blob([new Uint8Array(e.target.result)], {type: file.type });
resolve(blob);
};
fileReader.onerror = function () {
reject();
};
fileReader.readAsArrayBuffer(file);
})
}
將圖像保存為PDF。
const blob = await doc.saveToPdf();
通過以下函數(shù)下載PDF。
function downloadBlob(blob){
const link = document.createElement('a')
link.href = URL.createObjectURL(blob);
link.download = "scanned.pdf";
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(link.href);
}
使用編輯界面
Dynamsoft Document Viewer附帶一系列組件。在合并到PDF文件之前，我們可以使用其EditViewer查看和編輯圖像。
在HTML中添加容器。
<div id="container" style="height:480px;"></div>
使用以下代碼啟動它。
let editViewer = new Dynamsoft.DDV.EditViewer({
container: "container",
});
editViewer.openDocument(doc.uid);
我們可以旋轉、裁剪、重新排序和刪除圖像，并為圖像應用濾鏡。
以上就是使用JavaScript將圖片合并為PDF的實現(xiàn)的詳細內容，更多關于JavaScript圖片合并為PDF的資料請關注腳本之家其它相關文章！
相關文章
關于textarea的直觀換行的一些研究材料...2006-10-10
js字符串替換所有的指定字符或文字(推薦replaceAll方法)
要實現(xiàn)js字符串替換所有的某個字符，推薦大家使用replaceAll方法，默認不是所有瀏覽器都兼容，所以這里給出一個解決方案,需要的朋友可以參考下2014-07-07
JavaScript數(shù)組、函數(shù)、DOM 與 BOM 實戰(zhàn)全解析
文章總結了JavaScript中數(shù)組、函數(shù)、DOM和BOM的基本概念和操作方法,包括數(shù)組的創(chuàng)建和操作、函數(shù)的聲明與調用、DOM元素的獲取和操作、BOM對象的使用以及一些實戰(zhàn)案例,感興趣的朋友跟隨小編一起看看吧2026-01-01
這篇文章主要介紹了JS中實現(xiàn)數(shù)組開頭添加元素方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細介紹了JS實現(xiàn)省市縣三級下拉聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要介紹了簡單了解JavaScript彈窗實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了JavaScript資源預加載組件和滑屏組件的使用推薦,分別為preload和slide的用法講解,使用起來非常簡單,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了ant-design-pro使用qiankun微服務詳解,其實微服務需要有主應用和子應用，?一個子應用可以配置多個相關聯(lián)的主應用,配置方法都是一樣的，對ant-design-pro微服務配置相關知識，感興趣的朋友一起看看吧2022-03-03
這篇文章主要為大家詳細介紹了如何使用JavaScript獲取word的內容,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-02-02
這篇文章主要介紹了js中如何對json數(shù)組進行排序的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04