当前位置：首页 > article >正文

vue中附件下载及打印功能

article 2025/2/13 21:05:27

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) {
      // 获取文件的 URL
      const fileUrl = item.url;

      try {
        // 使用 fetch 获取文件内容并转换为 Blob
        const 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();
      };
    }