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

Posted 2023-03-29 世界和平�����

文件流

如何将各种文件的文件流(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"; // 引入workerSrc的地址

③调用函数，解析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标签的src属性的值

结语

以上就是相关一些文件的预览方式，所利用到的插件并非是单一的选择，还有其他的解决方案可以达到我们的目的。但是需要切记的事情是大部分插件都需要我们保证文件的完整性，才能够解析成功，在完成该功能的时候我们需要先关注文件上传和下载的时候有没有丢失或者损坏这个前提。

vue中实现在线预览pdf文件

方法1：使用插件pdfObject（Safari不能正常显示，安卓手机的支持也不好）

npm i pdfobject -S

main.js

Vue.prototype.$PDFObject = PDFObject;

 

<div id="example1" style="height:600px;width: 80%;margin: 0 auto"></div>

mounted(){
      let _this=this;
      this.$nextTick(function(){
        _this.$PDFObject.embed(‘/pdf/test.pdf‘, "#example1");
      });
     
    },

我这里用的是vue3,pdf文件放在public文件夹下

 

 对于兼容问题的解决办法，可以参考：https://www.cnblogs.com/wuhuacong/p/9566764.html

方法2 使用插件vue-pdf

npm i vue-pdf -S

在使用的地方：

import pdf from ‘vue-pdf‘

注册组件：

components:{pdf},

<ul class="pdf_pager">
            <li @click="scaleD">
                <p>放大</p>
            </li>
            <li @click="scaleX">
                <p>缩小</p>
            </li>
            <li  @click="changePdfPage(0)">
                <p>上一页</p>
            </li>
            <li @click="changePdfPage(1)">
                <p>下一页</p>
            </li>
        </ul>
        <pdf src="/pdf/test.pdf" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf"></pdf>

 

可以实现翻页和放大 缩小

方法：

// vue-pdf 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
            changePdfPage(val) {
                if(val === 0 && this.currentPage > 1) {
                    this.currentPage--;
                }
                if(val === 1 && this.currentPage < this.pageCount) {
                    this.currentPage++;
                }
            },
            // pdf加载时
            loadPdfHandler(e) {
                this.currentPage = 1; // 加载的时候先加载第一页
            },
            //放大
            scaleD() {
                this.scale += 5;
                // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
                this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
            },
             //缩小
            scaleX() {
                if(this.scale == 100) {
                    return;
                }
                this.scale += -5;
                this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
                // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
            }
            // vue-pdf 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页