Vue使用pdf.js和docx-preview實現(xiàn)docx和pdf的在線預(yù)覽
更新時間:2025年03月12日 09:57:50 作者:當new作碼
這篇文章主要為大家詳細介紹了在Vue中使用pdf.js和docx-preview實現(xiàn)docx和pdf的在線預(yù)覽的相關(guān)知識,文中的示例代碼講解詳細,需要的可以參考下
后端代碼:
SshConfig sshConfig = new SshConfig("ip", port, "username", "password"); ChannelSftp channelSftp = sshConfig.getChannelSftp(); String downUrl = "/**/**/";//服務(wù)器相對路徑 String pathname1 = downUrl + fileId + ".docx"; String pathname2 = downUrl + fileId + ".pdf"; InputStream inputStream1 = null; InputStream inputStream2 = null; //文件可能是docx或者pdf,因此需要分別嘗試獲取文件輸入流 try { inputStream1 = channelSftp.get(pathname1); } catch (SftpException e) { inputStream2 = channelSftp.get(pathname2); } byte[] buffer = new byte[1024]; int bytesRead; ByteArrayOutputStream output = new ByteArrayOutputStream(); if (inputStream1 != null) { while ((bytesRead = inputStream1.read(buffer)) != -1) { output.write(buffer, 0, bytesRead); } byte[] fileBytes1 = output.toByteArray(); // 現(xiàn)在fileBytes中包含了遠程文件的字節(jié)流 if (fileBytes1 != null) { channelSftp.disconnect(); sshConfig.disconnect(); // Convert the file to base64 String base64 = Base64.getEncoder().encodeToString(fileBytes1); map.put("fileUrl", pathname1); map.put("base64", base64); return map; } } else { while ((bytesRead = inputStream2.read(buffer)) != -1) { output.write(buffer, 0, bytesRead); } byte[] fileBytes1 = output.toByteArray(); // 現(xiàn)在fileBytes中包含了遠程文件的字節(jié)流 if (fileBytes1 != null) { channelSftp.disconnect(); sshConfig.disconnect(); // Convert the file to base64 String base64 = Base64.getEncoder().encodeToString(fileBytes1); map.put("fileUrl", pathname2); map.put("base64", base64); return map; } } return map;
前端代碼:
mounted方法中判斷使用哪一個插件
mounted() { let fileUrl = sessionStorage.getItem("fileUrl"); if (fileUrl.indexOf('.docx') !== -1) { let bstr = sessionStorage.getItem("bstr"); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } console.log("docx"); //u8arr.buffer 轉(zhuǎn)成arrayBuffer類型 this.docxRender(u8arr.buffer, this.title); } else { let bstr = sessionStorage.getItem("bstr"); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } this.pdfData = u8arr; console.log("pdf"); this.pdfReader(u8arr); } },
docx文件的渲染
//渲染docx docxRender(buffer, fileName) { let box = document.createElement('div') // 創(chuàng)建一個div let docx = require("docx-preview") docx.renderAsync(buffer, box).then(() => { // 渲染文件 let zhengwen = document.getElementById('zhengwen'); zhengwen.appendChild(box); //document.write(box.outerHTML); //渲染文件后將div添加到新窗口中,div不能提前添加,否則新窗口中不能渲染出文件 //注意這里不能直接用box document.title = fileName // 窗口標題 document.getElementsByClassName('docx')[0].style.width = 'auto' // 如果文件顯示正常,不用設(shè)置寬度 }).catch(function () { Message({ type: "error", message: "該文檔可能已損壞,請嘗試下載查閱" }) }) },
渲染效果圖:
pfd文件渲染:
//渲染pdf pdfReader(u8arr) { // 獲取PDF容器元素 let container = this.$refs.pdfContainer; // 配置PDFJS worker路徑 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js'; // 加載PDF文件流 pdfjsLib.getDocument(u8arr).promise.then((pdf) => { // 獲取頁面數(shù)量 const numPages = pdf.numPages; // 循環(huán)遍歷所有頁面 for (let i = 1; i <= numPages; i++) { pdf.getPage(i).then((page) => { // 設(shè)置縮放比例 const scale = 1.7; // 獲取渲染上下文 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 計算畫布大小 const viewport = page.getViewport({scale}); canvas.height = viewport.height; canvas.width = viewport.width; // 將PDF頁面渲染到畫布上 const renderContext = { canvasContext: ctx, viewport: viewport }; page.render(renderContext); // 添加畫布到容器中 container.appendChild(canvas); }); } }).catch(function () { Message({ type: "error", message: "該文檔可能已損壞,請嘗試下載查閱" }) }); },
注意,使用前需要下載相應(yīng)的庫,docx-preview工具不適用于渲染doc文件,需要自己去轉(zhuǎn)換文件類型(比如直接修改文件后綴名)
npm install pdfjs-dist npm install docx-preview
以上就是Vue使用pdf.js和docx-preview實現(xiàn)docx和pdf的在線預(yù)覽的詳細內(nèi)容,更多關(guān)于Vue文件在線預(yù)覽的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue實現(xiàn)原理this.$message實例詳解
這篇文章主要介紹了vue實現(xiàn)原理this.$message實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03vue3中vite.config.js相關(guān)常用配置超詳細講解
在Vue3項目中vite.config.js文件是Vite構(gòu)建工具的配置文件,它用于定義項目的構(gòu)建和開發(fā)選項,這篇文章主要介紹了vue3中vite.config.js相關(guān)常用配置的相關(guān)資料,需要的朋友可以參考下2025-04-04關(guān)于導(dǎo)入、配置Vuetify遇到的幾個問題
這篇文章主要介紹了關(guān)于導(dǎo)入、配置Vuetify遇到的幾個問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06