前端实现docx、pdf格式文件在线预览
theme: vuepress
highlight: atelier-heath-light
介绍
在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件
docx
docx的实现需要使用docx-preview插件
安装
npm i docx-preview
使用
创建一个容器标签
<div ref="file" v-show="extend == 'docx'"></div>
引入并创建渲染函数
import { renderAsync } from "docx-preview";
renderDocx() {
renderAsync(this.fileData, this.$refs.file, null, {
className: "docx", //默认和文档样式类的类名/前缀
inWrapper: true, //启用围绕文档内容呈现包装器
ignoreWidth: false, //禁用页面的渲染宽度
ignoreHeight: false, //禁用页面的渲染高度
ignoreFonts: false, //禁用字体渲染
breakPages: true, //在分页符上启用分页
ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
experimental: false, //启用实验功能(制表符停止计算)
trimXmlDeclaration: true, //如果为true,则在解析之前将从xml文档中删除xml声明
useBase64URL: false, //如果为true,图像、字体等将转换为base 64 URL,否则使用URL.createObjectURL
useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
showChanges: false, //启用文档更改的实验渲染(插入/删除)
debug: false, //启用额外的日志记录
});
},
pdf的预览需要使用PDFJS这个插件,通过将文件流解析写到canvas上实现预览效果
安装
npm i pdfjs-dist
引入和使用
<canvas
v-for="num in numPages"
:key="num"
:id="'canvas_' + num"
class="canvas"
></canvas>
此处pdf的渲染数据this.fileData
必须是一个ArrayBuffer格式的数据,如果请求的的数据是Blob格式必须要先使用Blob.arrayBuffer()
转换
async renderPdf(num = 1) {
this.fileData.getPage(num).then(page => {
// 设置canvas相关的属性
const canvas = document.getElementById("canvas_" + num);
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: this.pdfScale }); // 设置放缩比率
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);
if (this.numPages > num) {
setTimeout(() => {
return this.renderPdf(num + 1);
});
}
});
},
pdf的放大和缩小
pdf文件渲染后如果不能调整大小会因为源文件的大小和文件内容,出现模糊的问题,所以进行缩放渲染是有必要的
// pdf放大
setPdfZoomin() {
const max = 2;
if (this.pdfScale >= max) {
return;
}
this.pdfScale = this.pdfScale + 0.2;
this.renderPdf();
},
// pdf缩小
setPdfZoomout() {
const min = 0.6;
if (this.pdfScale <= min) {
return;
}
this.pdfScale = this.pdfScale - 0.1;
this.renderPdf();
},
多格式的文件渲染函数映射
因为将多种文件渲染放在一个文件中,所以处理函数需要做映射处理,执行对应格式的文件渲染
renderPreview(extend) {
const handle = {
docx: () => {
this.extend = "docx";
this.$nextTick(() => this.renderDocx());
},
pdf: () => {
this.extend = "pdf";
new Blob([this.fileData]).arrayBuffer().then(res => {
PDFJS.getDocument(res).promise.then(pdfDoc => {
this.numPages = pdfDoc.numPages; // pdf的总页数
this.fileData = pdfDoc;
this.$nextTick(() => this.renderPdf());
});
});
},
};
this.isLoading = false;
if (!Object.hasOwn(handle, extend)) {
this.extendName = extend;
return (this.extend = "other");
}
handle[extend]();
},
不支持的文件提示处理
在这个文件中,目前只支持docx和pdf的预览,如果出现了不支持的文件,需要增加一个提示处理,告知用户
例如如下的文件提示
<div class="container" v-show="extend == 'other'">
<a-alert
:message="`不支持.${this.extendName}格式的在线预览,请下载后预览或转换为支持的格式`"
description="支持docx, pdf格式的在线预览"
type="info"
show-icon
/>
</div>
总结
本文只是简单的总结了关于文件预览的纯前端实现和封装方式,对于业务的思路简单整理,如果是对于有更复杂的场景,还需要有更加具体的拆分和优化。
前端实现docx、pdf格式文件在线预览的更多相关文章
- 文件在线预览doc,docx转换pdf(一)
文件在线预览doc,docx转换pdf(一) 1. 前言 文档转换是一个是一块硬骨头,但是也是必不可少的,我们正好做的知识库产品中,也面临着同样的问题,文档转换,精准的全文搜索,知识的转换率,是知识库 ...
- 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html
#网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...
- 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...
- 基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程
大家好,又见面了. 在构建业务系统的时候,经常会涉及到对附件的支持,继而又会引申出对附件在线预览.在线编辑.多人协同编辑等种种能力的诉求. 对于人力不是特别充裕.或者项目投入预期规划不是特别大的公司或 ...
- C# WebAPI 文件在线预览
最近在写一个移动端API接口,其中有一个需求:接口返回附件url地址让手机端调用实现文件在线预览.大体实现思路:把doc.xls等文本格式文件转换为pdf,转换后的pdf文件存放在服务器上面,方便第二 ...
- 使用jodconverter和swftools实现文件在线预览
参考:仿百度文库解决方案(四)——利用JODConverter调用OpenOffice.org服务转换文档为PDF 文档在线预览主要用到如下两个工具 1,安装openoffice(同时下载jodcon ...
- kkfileview v2.0 发布,文件在线预览项目方案
kkfileview文件在线预览 此项目为文件文档在线预览项目解决方案,项目使用流行的spring boot搭建,易上手和部署,部署好后可以独立提供预览服务,使用http接口访问,不需要和应用集成,具 ...
- Atitit.office word excel ppt pdf 的web在线预览方案与html转换方案 attilax 总结
Atitit.office word excel ppt pdf 的web在线预览方案与html转换方案 attilax 总结 1. office word excel pdf 的web预览要求 ...
- asp.net word ecxel类型文件在线预览
asp.net word ecxel类型文件在线预览 首先得引用COM: Microsoft Excel 10 Object Library Microsoft Word 10 Object Libr ...
随机推荐
- 基于单层决策树的AdaBoost算法原理+python实现
这里整理一下实验课实现的基于单层决策树的弱分类器的AdaBoost算法. 由于是初学,实验课在找资料的时候看到别人的代码中有太多英文的缩写,不容易看懂,而且还要同时看代码实现的细节.算法的原理什么的, ...
- SSH 多密钥配置
目录 前言 一.SSH 是什么 二.密钥生成工具 三.密钥类型 四.本地配置 1.单密钥配置 2.多密钥配置 五.远端配置 1.GitHub/Gitee 2.服务器 前言 当我们从 GitHub 克隆 ...
- 2022-07-15 第六组 润土 Java03数据结构学习笔记
数据结构: 数组:最基本的数据结构(线性表) 链表:单向链表,双向链表 树:二叉树 图:深度优先遍历.广度优先遍历 查找: 线性查找 折半查找 排序: 冒泡排序* 快速排序 插入排序* 选择排序* 希 ...
- Ajax辨析
Ajax辨析 最近在多个知识点涉及到了ajax请求,各个知识有所交错,知识体系上学的有些混乱,这里梳理一下 单纯的发送Ajax请求 方式1: ajax传统4步骤 ajax的post请求 var xhr ...
- CF1706A Another String Minimization Problem 题解
题意 给定一个长度为 \(n\) 的序列 \(a\) 以及一个长度为 \(m\) 的字符串 \(s\),初始 \(s\) 均为 \(\text{B}\),第 \(i\) 次操作可以把 \(s_{a_i ...
- 分支结构_嵌套if的使用
嵌套if 语法结构: if 条件表达式1: if 内层条件表达式: 内层条件执行体1 else: 内存条件执行体2 else: 条件执行体 外层条件+内层条件的形式 example:#模拟打折的程序如 ...
- 内网渗透之Windows认证(二)
title: 内网渗透之Windows认证(二) categories: 内网渗透 id: 6 key: 域渗透基础 description: Windows认证协议 abbrlink: d6b7 d ...
- HTML5 基础学习
HTML 基础学习 参考资料 视频课程:https://www.bilibili.com/video/BV14J4114768 W3C文档:https://webplatform.github.io/ ...
- ChromePortable-Chrome便携化、绿化软件v2.0
ChromePortable-Chrome便携化.绿化软件v2.0-用户手册 By:ybmj@vip.163.com ,http://bbs.kafan.cn/thread-1806385-1-1.h ...
- DolphinScheduler - 1.3 系列核心表结构剖析
Apache DolphinScheduler 是一个分布式去中心化,易扩展的可视化 DAG 工作流任务调度系统.致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程中开箱即用. 近日 ...