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

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格式文件在线预览的更多相关文章

  1. 文件在线预览doc,docx转换pdf(一)

    文件在线预览doc,docx转换pdf(一) 1. 前言 文档转换是一个是一块硬骨头,但是也是必不可少的,我们正好做的知识库产品中,也面临着同样的问题,文档转换,精准的全文搜索,知识的转换率,是知识库 ...

  2. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

  3. 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误

    首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...

  4. 基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程

    大家好,又见面了. 在构建业务系统的时候,经常会涉及到对附件的支持,继而又会引申出对附件在线预览.在线编辑.多人协同编辑等种种能力的诉求. 对于人力不是特别充裕.或者项目投入预期规划不是特别大的公司或 ...

  5. C# WebAPI 文件在线预览

    最近在写一个移动端API接口,其中有一个需求:接口返回附件url地址让手机端调用实现文件在线预览.大体实现思路:把doc.xls等文本格式文件转换为pdf,转换后的pdf文件存放在服务器上面,方便第二 ...

  6. 使用jodconverter和swftools实现文件在线预览

    参考:仿百度文库解决方案(四)——利用JODConverter调用OpenOffice.org服务转换文档为PDF 文档在线预览主要用到如下两个工具 1,安装openoffice(同时下载jodcon ...

  7. kkfileview v2.0 发布,文件在线预览项目方案

    kkfileview文件在线预览 此项目为文件文档在线预览项目解决方案,项目使用流行的spring boot搭建,易上手和部署,部署好后可以独立提供预览服务,使用http接口访问,不需要和应用集成,具 ...

  8. Atitit.office word  excel  ppt pdf 的web在线预览方案与html转换方案 attilax 总结

    Atitit.office word  excel  ppt pdf 的web在线预览方案与html转换方案 attilax 总结 1. office word  excel pdf 的web预览要求 ...

  9. asp.net word ecxel类型文件在线预览

    asp.net word ecxel类型文件在线预览 首先得引用COM: Microsoft Excel 10 Object Library Microsoft Word 10 Object Libr ...

随机推荐

  1. Object类和toString方法 --和Object类的equals方法

    一,Object类概述:Object是类层次结构的根,每个类都可以将Object作为超类,所有类都直接或者间接的继承自该类构造方法:pulic Object()在面向对象中,子类要访问父类的无参构造方 ...

  2. 使用 spring-security-oauth2 体验 OAuth 2.0 的四种授权模式

    目录 背景 相关代码 授权码模式 第一步 访问GET /oauth/authorize 第二步 访问POST /oauth/authorize 第三步 访问POST /oauth/token 简化模式 ...

  3. 教你使用CANN将照片一键转换成卡通风格

    摘要:这次是将AnimeGAN部署到Ascend 310,从而实现对自己想要图片的一键转换为我们想看到的卡通风格. 本文分享自华为云社区<[CANN训练营]CANN训练营_昇腾AI趣味应用实现A ...

  4. Kubernetes组件介绍

    一.api-server   基本概念 该端口默认值为6443,可通过启动参数"--secure-port"的值来修改默认值. 默认IP地址为非本地(Non-Localhost)网 ...

  5. Dubbo源码(五) - 服务目录

    前言 本文基于Dubbo2.6.x版本,中文注释版源码已上传github:xiaoguyu/dubbo 今天,来聊聊Dubbo的服务目录(Directory).下面是官方文档对服务目录的定义: 服务目 ...

  6. 移动web开发01

    pc端的支持情况.IE9以下的版本就会全军覆没.移动端就不会出现版本支持问题. 因为第一个孩子是p,但是他又是在span里面选,所以根本选不出来,报错.改成第二个孩子才可以选出来. 这样就可以选出sp ...

  7. 四位一体水溶交融,Docker一拖三Tornado6.2 + Nginx + Supervisord非阻塞负载均衡容器式部署实践

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_203 容器,又见容器.Docker容器的最主要优点就在于它们是可移植的.一套服务,其所有的依赖关系可以捆绑到一个独立于Linux内 ...

  8. 网络编程、OSI七层协议

    目录 软件开发架构 1.什么是软件开发架构 2.软件开发架构 3.架构优劣势 4.架构发展趋势 网络编程简介 1.如何理解网络编程 2.网络编程的目的 3.网络编程的意义 4.网络编程的起源 5.网络 ...

  9. java日常开发必备:list的四种遍历

      在平时的开发过程中使用List的场景很多,你知道List的遍历有多少种方式?今天一起来梳理下List的几种遍历方式.这里以java.util.ArrayList为例来演示.   这里有一个最简单的 ...

  10. 6.17 NOI 模拟

    \(T1\ crime\) 计算几何\(+\)最短路,我的写法很麻烦 比较无脑,直接扫一遍判断能否连接即可,需要特别判断对角线的情况 #include<bits/stdc++.h> #de ...