vue中附件下载及打印功能

1.附件dom
注：fileList是由后台返回的附件数组，数组中包含附件名称fileName,附件地址url，附件id等信息

<el-form-item label="附件" style="width: 100% !important;" v-if="modelType=='borrowDetail'"><div v-for="item in fileList" :key="item.fileName"><span style="color:#6392E7; display:inline-block; margin-right:30px;" >{{item.fileName}}</span><el-button type="text" size="small"  :disabled="isAllowDownload=='0'" @click="downloadFile(item)"> 下载 </el-button><el-button type="text" size="small" :disabled="isAllowPrint=='0'"  @click="printDocument(item)"> 打印 </el-button></div></el-form-item>

2.安装打印pdf文件的 pdfjs-dist 依赖

npm install pdfjs-dist

3.如果您使用 Webpack，可能需要配置 worker-loader 来处理 pdfjs-dist 的 Worker 文件,安装 worker-loader

npm install --save-dev worker-loader

4.在代码中导入pdfjsLib及设置 Worker

import * as pdfjsLib from 'pdfjs-dist';
// 设置 Worker 路径
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;

5.安装打印doc/docx文件的依赖，安装 mammoth.js，这是一个可以解析 DOCX 文件的库

npm install mammoth

6.导入mammoth

import mammoth from 'mammoth';

7.下载downloadFile方法

 /*附件下载事件*/downloadFile(file){this.download('system/attachment/download', {attachmentId:file.attachmentId}, `${file.fileName}`)},

8.打印printDocument方法

   /*附件点击打印事件*/注：item是由后台返回的附件数组，数组中包含附件名称fileName,附件地址url，附件id等信息printDocument(item) {// 获取文件的扩展名const fileExtension = item.fileName.split('.').pop().toLowerCase();// 根据扩展名判断文件类型并调用相应方法if (fileExtension === 'pdf') {this.printPDF(item);} else if (fileExtension === 'doc' || fileExtension === 'docx') {this.printDocx(item);} else {console.log('不支持的文件格式');}},/*打印doc文件方法*/async printDocx(item) {// 获取文件的 URLconst fileUrl = item.url;try {// 使用 fetch 获取文件内容并转换为 Blobconst response = await fetch(fileUrl);const fileBlob = await response.blob();// 创建 FileReader 读取 Blob 内容const reader = new FileReader();reader.onload = async () => {const result = await mammoth.convertToHtml({ arrayBuffer: reader.result });const html = result.value;// 打印文件内容const printWindow = window.open('', '', 'height=600,width=800');printWindow.document.write('<html><body>');printWindow.document.write(html);printWindow.document.write('</body></html>');printWindow.document.close();printWindow.print();};reader.readAsArrayBuffer(fileBlob); // 读取文件内容} catch (error) {console.error('Failed to fetch or read file:', error);}},/*打印Pdf方法*/async printPDF(file) {const loadingTask = pdfjsLib.getDocument(file.url);const pdf = await loadingTask.promise;const page = await pdf.getPage(1); // 打印第一页const viewport = page.getViewport({ scale: 1 });const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;await page.render({ canvasContext: context, viewport }).promise;const dataUrl = canvas.toDataURL();const img = new Image();img.src = dataUrl;img.onload = () => {const printWindow = window.open('', '', 'height=600,width=800');printWindow.document.write('<html><body>');printWindow.document.write('<img src="' + dataUrl + '" />');printWindow.document.write('</body></html>');printWindow.document.close();printWindow.print();};}