前端实现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 ...
随机推荐
- Object类和toString方法 --和Object类的equals方法
一,Object类概述:Object是类层次结构的根,每个类都可以将Object作为超类,所有类都直接或者间接的继承自该类构造方法:pulic Object()在面向对象中,子类要访问父类的无参构造方 ...
- 使用 spring-security-oauth2 体验 OAuth 2.0 的四种授权模式
目录 背景 相关代码 授权码模式 第一步 访问GET /oauth/authorize 第二步 访问POST /oauth/authorize 第三步 访问POST /oauth/token 简化模式 ...
- 教你使用CANN将照片一键转换成卡通风格
摘要:这次是将AnimeGAN部署到Ascend 310,从而实现对自己想要图片的一键转换为我们想看到的卡通风格. 本文分享自华为云社区<[CANN训练营]CANN训练营_昇腾AI趣味应用实现A ...
- Kubernetes组件介绍
一.api-server 基本概念 该端口默认值为6443,可通过启动参数"--secure-port"的值来修改默认值. 默认IP地址为非本地(Non-Localhost)网 ...
- Dubbo源码(五) - 服务目录
前言 本文基于Dubbo2.6.x版本,中文注释版源码已上传github:xiaoguyu/dubbo 今天,来聊聊Dubbo的服务目录(Directory).下面是官方文档对服务目录的定义: 服务目 ...
- 移动web开发01
pc端的支持情况.IE9以下的版本就会全军覆没.移动端就不会出现版本支持问题. 因为第一个孩子是p,但是他又是在span里面选,所以根本选不出来,报错.改成第二个孩子才可以选出来. 这样就可以选出sp ...
- 四位一体水溶交融,Docker一拖三Tornado6.2 + Nginx + Supervisord非阻塞负载均衡容器式部署实践
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_203 容器,又见容器.Docker容器的最主要优点就在于它们是可移植的.一套服务,其所有的依赖关系可以捆绑到一个独立于Linux内 ...
- 网络编程、OSI七层协议
目录 软件开发架构 1.什么是软件开发架构 2.软件开发架构 3.架构优劣势 4.架构发展趋势 网络编程简介 1.如何理解网络编程 2.网络编程的目的 3.网络编程的意义 4.网络编程的起源 5.网络 ...
- java日常开发必备:list的四种遍历
在平时的开发过程中使用List的场景很多,你知道List的遍历有多少种方式?今天一起来梳理下List的几种遍历方式.这里以java.util.ArrayList为例来演示. 这里有一个最简单的 ...
- 6.17 NOI 模拟
\(T1\ crime\) 计算几何\(+\)最短路,我的写法很麻烦 比较无脑,直接扫一遍判断能否连接即可,需要特别判断对角线的情况 #include<bits/stdc++.h> #de ...