一文详解如何在vue中实现文件预览功能
更新时间：2022年10月12日 11:04:28 作者：世界和平�����
很多Vue项目中都需要PDF文件预览功能,比如合同ERP,销售CRM,内部文档CMS管理系统,内置PDF文件在线预览功能,下面这篇文章主要给大家介绍了关于如何在vue中实现文件预览功能的相关资料,需要的朋友可以参考下
文件流
如何将各种文件的文件流(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中实现文件预览功能的文章就介绍到这了,更多相关vue实现文件预览功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑,本文将给大家介绍了Vue3中watch监听的五种情况,文中通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue.js学习笔记之v-bind和v-on解析，v-bind 指令用于响应地更新 HTML 特征，v-on 指令用于监听DOM事件，文中还给大家提到了v-bind,v-on的缩写，感兴趣的朋友参考下吧2018-05-05
下面小编就为大家带来一篇vue router-link传参以及参数的使用实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最近在研究Vuex2.0,搞了好几天终于有点头绪了。下面这篇文章主要给大家介绍了关于vue2.0学习之axios的封装与vuex的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-05-05
这篇文章主要介绍了Vue数据增删改查与表单验证的实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-10-10
这篇文章主要介绍了深入理解Vue.js轻量高效的前端组件化方案 ,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了解决Vue项目中tff报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家详细介绍了vue-quill-editor富文本编辑器简单使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
这篇文章主要介绍了vue实现在进行增删改操作后刷新页面，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue和React的区别，毕竟是两个框架，不像两个 API，要说细节上的区别就太多太多了，本文就简单的带大家说说Vue 和 React 的区别,需要的朋友可以参考下2023-05-05
最新评论