一文详解如何在vue中实现文件预览功能

2022-11-13 18:16

短信预约 -IT技能 免费直播动态提醒

文件流

如何将各种文件的文件流(blob)转化为线上可以直接预览的数据，这里简单介绍四种不同类型的文件预览。分别是pdf，docx，xlsx，jpg/png/jpeg等。有一个事情是需要重点注意的，文件流必须保证能够被正常下载解析后才可以支持预览，否则以下使用的各种插件都可能会产生报错。（需着重关注文件加解密后文件是否会出现损坏的问题）

以下是从后端获取到的文件流形式：

docx的预览

通过借助插件docx-preview实现。

① 首先安装该插件

npm install docx-preview

② 引入对应包

import { renderAsync } from 'docx-preview';

③调用函数，解析docx文件

renderAsync(res.data, document.getElementById("preload_box"), null, {
   className: "docx", // 默认和文档样式类的类名/前缀
   inWrapper: true, // 启用围绕文档内容渲染包装器
   ignoreWidth: false, // 禁止页面渲染宽度
   ignoreHeight: false, // 禁止页面渲染高度
   ignoreFonts: false, // 禁止字体渲染
   breakPages: true, // 在分页符上启用分页
   ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
   experimental: false, //启用实验性功能（制表符停止计算）
   trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
   debug: false, // 启用额外的日志记录
})

pdf的预览

① 首先安装该插件

npm install pdfjs-dist

② 引入对应包

import * as PDFJS from "pdfjs-dist/legacy/build/pdf";  // 引入PDFJS 
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerclass="lazy" data-src的地址

③调用函数，解析pdf文件

const blobPdf = new window.Blob([res.data], { type: 'application/pdf;chaset-UTF-8' })
const pdfhref = URL.createObjectURL(blobPdf);
PDFJS.getDocument(pdfhref).promise.then(pdfDoc=>{
   const numPages = pdfDoc.numPages; // pdf的总页数
   // 获取第1页的数据
   pdfDoc.getPage(1).then(page =>{
      // 设置canvas相关的属性
      const canvas = document.getElementById("pdf_canvas");
      const ctx = canvas.getContext("2d");
      const dpr = window.devicePixelRatio || 1;
      const bsr =
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1;
      const ratio = dpr / bsr;
      const viewport = page.getViewport({ scale: 1 });
      canvas.width = viewport.width * ratio;
      canvas.height = viewport.height * ratio;
      canvas.style.width = viewport.width + "px";
      canvas.style.height = viewport.height + "px";
      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
      const renderContext = {
      canvasContext: ctx,
      viewport: viewport,
   };
   // 数据渲染到canvas画布上
   page.render(renderContext);
  })
})

关于pdf的解析这里有几个问题需要注意：

1.我们为了正确解析pdf，将pdf文件流转化为一个blob的地址去被解析器读取。

2.由于插件每次只能查询pdf文件一页数据，所以我们需要额外添加翻页的逻辑代码。

3.被pdf渲染的元素pdf_canvas必须是canvas标签。

以下为翻页的代码：

      // 切换pdf页数
      function changePdfPage (type) {
        if (type == 'pre') {
          if (pdfPage.value <= 1) {
            ElMessage.error('没有上一页了');
            return 
          }
          pdfPage.value -= 1
        } else {
          if (pdfPage.value >= pdfValue.numPages) {
            ElMessage.error('没有下一页了');
            return 
          }
          pdfPage.value += 1
        }
        initPdfPage()
      }
      
      // 重新初始化pdf对应页数
      function initPdfPage () {
        pdfValue.getPage(pdfPage.value).then(page =>{
          // 设置canvas相关的属性
          const canvas = document.getElementById("pdf_canvas");
          const ctx = canvas.getContext("2d");
          const dpr = window.devicePixelRatio || 1;
          const bsr =
            ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio ||
            1;
          const ratio = dpr / bsr;
          const viewport = page.getViewport({ scale: 1 });
          canvas.width = viewport.width * ratio;
          canvas.height = viewport.height * ratio;
          canvas.style.width = viewport.width + "px";
          canvas.style.height = viewport.height + "px";
          ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
          const renderContext = {
            canvasContext: ctx,
            viewport: viewport,
          };
          // 数据渲染到canvas画布上
          page.render(renderContext);
        })
      }

xlsx预览

① 首先安装该插件

npm install xlsx

② 引入对应包

import * as XLSX from 'xlsx/xlsx.mjs'

<div class="sheet_list">
   <p class="sheet_item" v-for="(item, index) in workbook.SheetNames" @click="getTable(item)">{{item}}</p>
</div>
<el-table :data="excelData" style="width: 100%">
   <el-table-column
     v-for="(value, key, index) in excelData[0]"
     :key="index"
     :prop="key"
     :label="key"
   ></el-table-column>
</el-table>

 const xlsx_data = await res.data.arrayBuffer()
 let tem_workbook = XLSX.read(xlsx_data, {type:"array"}); // 解析数据
 workbook.value = tem_workbook
 getTable(tem_workbook.SheetNames[0]); // 读取第一张表数据
 
 // 解析xlsx数据为table
 function getTable(sheetName) {
    let worksheet = workbook.value.Sheets[sheetName];
    excelData.value = XLSX.utils.sheet_to_json(worksheet);
 }

xlsx插件仅仅是帮我们解析excel表的数据，并没有帮我们排版，所以通常我们需要自己写样式重新排列数据，用element的table组件是个不错的选择。

同时为了可以切换多个表，我们还可以将表名数组作一个遍历，提供给用户切换表的功能。

图片的预览

图片的预览相对而言简单了许多，不需要利用任何插件，仅仅只需要将图片文件流转换为一个可以被查阅的blob地址。

const blobImage = new window.Blob([res.data], { type: 'image/' + fileType }) // fileType指图片的类型
const imageHref = URL.createObjectURL(blobImage); // 创造一个地址
preloadImg.value = imageHref // img标签的class="lazy" data-src属性的值