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

article/2025/9/6 0:56:17

文件流

如何将各种文件的文件流(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-columnv-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_workbookgetTable(tem_workbook.SheetNames[0]); // 读取第一张表数据// 解析xlsx数据为tablefunction 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属性的值