vue 在线阅读PDF
2024-04-16 17:40:03
项目中使用到在线阅读PDF的功能很常见，平时的话，我都用的window.open或者下面这俩属性，都可以直接展示出来
<object :data="fileById" width="90%" height="600"/>
<embed :src="fileById" style=" width:90%;height: 600px; " />
但是用户那边有要求，不能右键下载，复制之类的，本来想用pdf.js去处理的，在途中突然发现vue-pdf这个东西，发现还挺不错的，简单记录一下，直接上效果图和代码
安装：npm install --save vue-pdf
引入：import pdf from 'vue-pdf'components:{pdf},
demo代码：
<template><!--筛选查询--><!--设置默认被选中--><div><el-row><el-col :span="20" ><div class="grid-content bg-purple" ><!-- <object data="http://192.168.6.98:8080/profile/tmp/shardingsphere_docs_cn1622625198005.pdf" width="90%" height="600"/> --><div style="width: 100px;position: fixed;top: 50%;z-index: 99;left: 10%;"><el-button icon="el-icon-top" @click.stop="prePage" style="display: block;margin-left: 10px;" /><span style="color: red;margin-left: 20px;">{{pageNum}}/{{pageTotalNum}}</span><el-button @click.stop="nextPage" icon="el-icon-bottom" style="display: block;margin-left: 10px;" /><el-button icon="el-icon-refresh-right" @click.stop="clock" style="display: block;" /><el-button icon="el-icon-refresh-left" @click.stop="counterClock" style="display: block;" /><el-button @touchstart="idx=0" @touchend="idx=-1" @click="scaleD" icon="el-icon-zoom-in" style="display: block;" /><el-button @touchstart="idx=1" @touchend="idx=-1" @click="scaleX" icon="el-icon-zoom-out" style="display: block;" /></div><pdf ref="pdf":src="url":page="pageNum":rotate="pageRotate"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></div></el-col><el-col :span="4" class="detailsMsg"><div class="grid-content bg-purple-light">1111</div></el-col></el-row></div>
</template><script>import pdf from 'vue-pdf'export default {name: 'hello',components:{pdf},data () {return {msg: 'Welcome to Your Vue.js App',url:"http://192.168.6.98:8080/profile/tmp/shardingsphere_docs_cn1622625198005.pdf",pageNum: 1,pageTotalNum: 1,pageRotate: 0,// 加载进度loadedRatio: 0,curPageNum: 0,scale: 100, //放大系数idx: -1,}},methods: {// 上一页函数，prePage() {var page = this.pageNumpage = page > 1 ? page - 1 : this.pageTotalNumthis.pageNum = page},// 下一页函数nextPage() {var page = this.pageNumpage = page < this.pageTotalNum ? page + 1 : 1this.pageNum = page},// 页面顺时针翻转90度。clock() {this.pageRotate += 90},// 页面逆时针翻转90度。counterClock() {this.pageRotate -= 90},// 页面加载回调函数，其中e为当前页数pageLoaded(e) {this.curPageNum = e},// 其他的一些回调函数。pdfError(error) {console.error(error)},//放大scaleD() {this.scale += 5;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";},//缩小scaleX() {if (this.scale == 50) {return;}this.scale += -5;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";},}}
</script><style>
</style>
参考地址：https://www.cnblogs.com/shaozhu520/p/12801184.html
这上面存在一个问题，就是我用代码处理过的PDF是带有水印的，但是这里水印却不显示了，百度相关却没有找到好的解决方案，然后通过前端处理了一下。
首先自定义一下水印指令 新建watermark.js
import Vue from "vue";Vue.directive("watermark", (el, binding) => {(function (str, container, id, font) {setTimeout(function () {var containerWidth = container.offsetWidth || "400"; // 获取父容器宽var containerHeight = container.offsetHeight || "100"; // 获取父容器高container.style.position = "relative"; // 设置布局为相对布局// 创建canvas元素(先制作一块背景图)const can = document.createElement("canvas");can.width = containerWidth; // 设置每一块的宽度can.height = containerHeight; // 高度const cans = can.getContext("2d"); // 获取canvas画布cans.rotate((-20 * Math.PI) / 270); // 逆时针旋转π/9cans.font = font || "20px PingFang-SC-Regular"; // 设置字体cans.fillStyle = "rgba(219,8,8, 0.3)"; // 设置字体的颜色cans.textAlign = "left"; // 文本对齐方式cans.textBaseline = "Middle"; // 文本基线cans.fillText(str, 0, (4 * can.height) / 5); // 绘制文字cans.fillText(str, 0, (4 * can.height) / 10); // 绘制文字// 创建一个div元素const div = document.createElement("div");div.id = id; // 设置iddiv.style.pointerEvents = "none"; // 取消所有事件div.style.top = "-15px";div.style.left = "80px";div.style.position = "absolute";div.style.zIndex = "100000";div.style.width = containerWidth + "px";div.style.height = containerHeight + "px";div.style.background ="url(" + can.toDataURL("image/png") + ") left top repeat";container.appendChild(div); // 追加到页面}, 300);})(binding.value.text, el, binding.value.id, binding.value.font);
});
然后在main.js引入import "@/api/file/watermark";
使用如下：
<div v-watermark="{id: 'watermark',text: waterMark,font: '46px Microsoft JhengHei',}">
</div>
waterMark 是你动态传入的水印值
参考地址：https://www.cnblogs.com/zhaomeizi/p/13577701.html
如果打包运行出现 ***worker.js 404 错误，
解决方案：
找到该目录 node_modules/worker-loader/dist/index.js
修改
const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {context: options.context || this.rootContext || this.options.context,regExp: options.regExp});
修改后
const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {context: options.context || this.rootContext || this.options.context,regExp: options.regExp});
成功解决
20211026处理打印乱码
官方提供的解决方案：https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7
但是我按照这个修改后会出现多的空白页，也不能直接复制过来使用，所幸看到一个老哥也有过同样问题，他贴出来了修改后的代码，复制过来直接使用，没问题了
https://blog.csdn.net/qq_42249552/article/details/112860593
修改后的代码
import {PDFLinkService} from 'pdfjs-dist/es5/web/pdf_viewer';var pendingOperation = Promise.resolve();export default function (PDFJS) {function isPDFDocumentLoadingTask(obj) {return typeof (obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;// or: return obj.constructor.name === 'PDFDocumentLoadingTask';}function createLoadingTask(src, options) {var source;if (typeof (src) === 'string')source = {url: src};else if (src instanceof Uint8Array)source = {data: src};else if (typeof (src) === 'object' && src !== null)source = Object.assign({}, src);elsethrow new TypeError('invalid src type');// source.verbosity = PDFJS.VerbosityLevel.INFOS;// source.pdfBug = true;// source.stopAtErrors = true;if (options && options.withCredentials)source.withCredentials = options.withCredentials;var loadingTask = PDFJS.getDocument(source);loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not publicif (options && options.onPassword)loadingTask.onPassword = options.onPassword;if (options && options.onProgress)loadingTask.onProgress = options.onProgress;return loadingTask;}function PDFJSWrapper(canvasElt, annotationLayerElt, emitEvent) {var pdfDoc = null;var pdfPage = null;var pdfRender = null;var canceling = false;canvasElt.getContext('2d').save();function clearCanvas() {canvasElt.getContext('2d').clearRect(0, 0, canvasElt.width, canvasElt.height);}function clearAnnotations() {while (annotationLayerElt.firstChild)annotationLayerElt.removeChild(annotationLayerElt.firstChild);}this.destroy = function () {if (pdfDoc === null)return;// Aborts all network requests and destroys worker.pendingOperation = pdfDoc.destroy();pdfDoc = null;}this.getResolutionScale = function () {return canvasElt.offsetWidth / canvasElt.width;}this.printPage = function (dpi, pageNumberOnly) {if (pdfPage === null)return;// 1in == 72pt// 1in == 96pxvar PRINT_RESOLUTION = dpi === undefined ? 150 : dpi;var PRINT_UNITS = PRINT_RESOLUTION / 72.0;var CSS_UNITS = 96.0 / 72.0;var printContainerElement = document.createElement('div');printContainerElement.setAttribute('id', 'print-container')function removePrintContainer() {printContainerElement.parentNode.removeChild(printContainerElement);}new Promise(function (resolve, reject) {printContainerElement.frameBorder = '0';printContainerElement.scrolling = 'no';printContainerElement.width = '0px;'printContainerElement.height = '0px;'printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0';window.document.body.appendChild(printContainerElement);resolve(window);}).then(function (win) {win.document.title = '';return pdfDoc.getPage(1).then(function (page) {var viewport = page.getViewport({scale: 1});win.document.head.appendChild(win.document.createElement('style')).textContent ='@supports ((size:A4) and (size:1pt 1pt)) {' +'.print-canvas { display: none }' +'@media print {' +'* { margin: 0 ;padding: 0}' +'@page { margin: 3mm; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +'.print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +'body > *:not(#print-container) { display: none; }' +'}'return win;})}).then(function (win) {var allPages = [];for (var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber) {if (pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1)continue;allPages.push(pdfDoc.getPage(pageNumber).then(function (page) {var viewport = page.getViewport({scale: 1});var printCanvasElt = printContainerElement.appendChild(win.document.createElement('canvas'));printCanvasElt.setAttribute('class', 'print-canvas')printCanvasElt.width = (viewport.width * PRINT_UNITS);printCanvasElt.height = (viewport.height * PRINT_UNITS);return page.render({canvasContext: printCanvasElt.getContext('2d'),transform: [ // Additional transform, applied just before viewport transform.PRINT_UNITS, 0, 0,PRINT_UNITS, 0, 0],viewport: viewport,intent: 'print'}).promise;}));}Promise.all(allPages).then(function () {win.focus(); // Required for IEif (win.document.queryCommandSupported('print')) {win.document.execCommand('print', false, false);} else {win.print();}removePrintContainer();}).catch(function (err) {removePrintContainer();emitEvent('error', err);})})}this.renderPage = function (rotate) {if (pdfRender !== null) {if (canceling)return;canceling = true;pdfRender.cancel();return;}if (pdfPage === null)return;var pageRotate = (pdfPage.rotate === undefined ? 0 : pdfPage.rotate) + (rotate === undefined ? 0 : rotate);var scale = canvasElt.offsetWidth / pdfPage.getViewport({scale: 1}).width * (window.devicePixelRatio || 1);var viewport = pdfPage.getViewport({scale: scale, rotation: pageRotate});emitEvent('page-size', viewport.width, viewport.height, scale);canvasElt.width = viewport.width;canvasElt.height = viewport.height;pdfRender = pdfPage.render({canvasContext: canvasElt.getContext('2d'),viewport: viewport});annotationLayerElt.style.visibility = 'hidden';clearAnnotations();var viewer = {scrollPageIntoView: function (params) {emitEvent('link-clicked', params.pageNumber)},};var linkService = new PDFLinkService();linkService.setDocument(pdfDoc);linkService.setViewer(viewer);pendingOperation = pendingOperation.then(function () {var getAnnotationsOperation =pdfPage.getAnnotations({intent: 'display'}).then(function (annotations) {PDFJS.AnnotationLayer.render({viewport: viewport.clone({dontFlip: true}),div: annotationLayerElt,annotations: annotations,page: pdfPage,linkService: linkService,renderInteractiveForms: false});});var pdfRenderOperation =pdfRender.promise.then(function () {annotationLayerElt.style.visibility = '';canceling = false;pdfRender = null;}).catch(function (err) {pdfRender = null;if (err instanceof PDFJS.RenderingCancelledException) {canceling = false;this.renderPage(rotate);return;}emitEvent('error', err);}.bind(this))return Promise.all([getAnnotationsOperation, pdfRenderOperation]);}.bind(this));}this.forEachPage = function (pageCallback) {var numPages = pdfDoc.numPages;(function next(pageNum) {pdfDoc.getPage(pageNum).then(pageCallback).then(function () {if (++pageNum <= numPages)next(pageNum);})})(1);}this.loadPage = function (pageNumber, rotate) {pdfPage = null;if (pdfDoc === null)return;pendingOperation = pendingOperation.then(function () {return pdfDoc.getPage(pageNumber);}).then(function (page) {pdfPage = page;this.renderPage(rotate);emitEvent('page-loaded', page.pageNumber);}.bind(this)).catch(function (err) {clearCanvas();clearAnnotations();emitEvent('error', err);});}this.loadDocument = function (src) {pdfDoc = null;pdfPage = null;emitEvent('num-pages', undefined);if (!src) {canvasElt.removeAttribute('width');canvasElt.removeAttribute('height');clearAnnotations();return;}// wait for pending operation endspendingOperation = pendingOperation.then(function () {var loadingTask;if (isPDFDocumentLoadingTask(src)) {if (src.destroyed) {emitEvent('error', new Error('loadingTask has been destroyed'));return}loadingTask = src;} else {loadingTask = createLoadingTask(src, {onPassword: function (updatePassword, reason) {var reasonStr;switch (reason) {case PDFJS.PasswordResponses.NEED_PASSWORD:reasonStr = 'NEED_PASSWORD';break;case PDFJS.PasswordResponses.INCORRECT_PASSWORD:reasonStr = 'INCORRECT_PASSWORD';break;}emitEvent('password', updatePassword, reasonStr);},onProgress: function (status) {var ratio = status.loaded / status.total;emitEvent('progress', Math.min(ratio, 1));}});}return loadingTask.promise;}).then(function (pdf) {pdfDoc = pdf;emitEvent('num-pages', pdf.numPages);emitEvent('loaded');}).catch(function (err) {clearCanvas();clearAnnotations();emitEvent('error', err);})}annotationLayerElt.style.transformOrigin = '0 0';}return {createLoadingTask: createLoadingTask,PDFJSWrapper: PDFJSWrapper,}
}
2022-2-16 补更 涉及到打印问题了，火狐这边很难搞，最终选定pdf.js，由于火狐版本比较低，所以选择使用2.0.x版本的pdf.js去使用，感觉效果比较赞。
官网地址：http://mozilla.github.io/pdf.js/ 老版本自己找找吧，下载完解压后如下
把这三个文件放到public下面
页面使用： <iframe :src="'pdf/web/viewer.html?file='+this.fileById+'&locale=zh-CN'" style="width: 100%;height: 1000px;z-index: 999;">
第一次使用会有跨域问题，注释viewer.js 中throw new Error('file origin does not match viewer\'s')
其他常见问题就百度吧，效果嘎嘎的
**
pdf加密解密
**
<repositories><repository><id>com.e-iceblue</id><url>http://repo.e-iceblue.cn/repository/maven-public/</url></repository></repositories><dependencies><dependency><groupId> e-iceblue </groupId><artifactId>spire.pdf</artifactId><version>3.4.2</version></dependency></dependencies>
import com.spire.pdf.PdfDocument;
import com.spire.pdf.security.PdfEncryptionKeySize;
import com.spire.pdf.security.PdfPermissionsFlags;import java.util.EnumSet;public class PdfTest {public static void main(String[] args) {encryptPdf("C:\\Users\\ljw\\Desktop\\12\\1.pdf","C:\\Users\\ljw\\Desktop\\12\\2.pdf");decryptPdf("C:\\Users\\ljw\\Desktop\\12\\2.pdf","C:\\Users\\ljw\\Desktop\\12\\3.pdf");}private static String password="123456";/**** @param orgFile 要加密的文件绝对地址* @param descFile 加密后的文件绝对地址*/public static void encryptPdf(String orgFile,String descFile) {PdfDocument doc =null;try {//创建PdfDocument实例doc = new PdfDocument();//加载PDF文件doc.loadFromFile(orgFile);//加密PDF文件PdfEncryptionKeySize keySize = PdfEncryptionKeySize.Key_128_Bit;String openPassword = password;//打开文档时，仅用于查看文档String permissionPassword = password;//打开文档时，可编辑文档EnumSet flags = EnumSet.of(PdfPermissionsFlags.Print, PdfPermissionsFlags.Fill_Fields);doc.getSecurity().encrypt(openPassword, permissionPassword, flags, keySize);//保存文件doc.saveToFile(descFile);} catch (Exception e) {e.printStackTrace();}finally {if(doc!=null) {doc.close();}}}/**** @param orgFile 被加密的文件地址* @param descFile解密后的文件地址* @throws Exception*/public static void decryptPdf(String orgFile,String descFile) {PdfDocument doc = null;try {//创建PdfDocument实例doc = new PdfDocument();//加载带密码保护的PDF文件doc.loadFromFile(orgFile, password);//解除文档中的密码保护doc.getSecurity().encrypt("", "", PdfPermissionsFlags.getDefaultPermissions(), PdfEncryptionKeySize.Key_256_Bit, password);//保存文件doc.saveToFile(descFile);} catch (Exception e) {}finally {if(doc!=null) {doc.close();}}}
}
解决生成的文件有水印警告
import com.spire.pdf.PdfDocument;
import com.spire.pdf.PdfPageBase;
import com.spire.pdf.security.PdfEncryptionKeySize;
import com.spire.pdf.security.PdfPermissionsFlags;import java.util.EnumSet;public class PdfTest {public static void main(String[] args) {encryptPdf("C:\\Users\\ljw\\Desktop\\12\\1.pdf","C:\\Users\\ljw\\Desktop\\12\\2.pdf");decryptPdf("C:\\Users\\ljw\\Desktop\\12\\2.pdf","C:\\Users\\ljw\\Desktop\\12\\3.pdf");}private static String password="123456";/**** @param orgFile 要加密的文件绝对地址* @param descFile 加密后的文件绝对地址*/public static void encryptPdf(String orgFile,String descFile) {PdfDocument doc =null;try {//创建PdfDocument实例doc = new PdfDocument();//加载PDF文件doc.loadFromFile(orgFile);//解决生成的文件有警告水印PdfPageBase pb = doc.getPages().add(); //新增一页doc.getPages().remove(pb);//加密PDF文件PdfEncryptionKeySize keySize = PdfEncryptionKeySize.Key_128_Bit;String openPassword = password;//打开文档时，仅用于查看文档String permissionPassword = password;//打开文档时，可编辑文档EnumSet flags = EnumSet.of(PdfPermissionsFlags.Print, PdfPermissionsFlags.Fill_Fields);doc.getSecurity().encrypt(openPassword, permissionPassword, flags, keySize);//保存文件doc.saveToFile(descFile);} catch (Exception e) {e.printStackTrace();}finally {if(doc!=null) {doc.close();}}}/**** @param orgFile 被加密的文件地址* @param descFile解密后的文件地址* @throws Exception*/public static void decryptPdf(String orgFile,String descFile) {PdfDocument doc = null;try {//创建PdfDocument实例doc = new PdfDocument();//加载带密码保护的PDF文件doc.loadFromFile(orgFile, password);//解决生成的文件有警告水印PdfPageBase pb = doc.getPages().add(); //新增一页doc.getPages().remove(pb);//解除文档中的密码保护doc.getSecurity().encrypt("", "", PdfPermissionsFlags.getDefaultPermissions(), PdfEncryptionKeySize.Key_256_Bit, password);//保存文件doc.saveToFile(descFile);} catch (Exception e) {}finally {if(doc!=null) {doc.close();}}}
}
vue 在线阅读PDF相关推荐
- 原生安卓使用webview在线阅读pdf文档——解决方案
大家是不是遇到过类似在线阅读pdf的坑人需求?当然也有更坑的,那咱们今天来解决掉这个在线阅读pdf的坑,相信大家也看过各种帖子,各种办法,什么pdfview,什么**的第三方pdf查看框架,或许你会觉 ...
- pdf.js 在线阅读PDF
在网上找了一下如何在线显示pdf文件.个人还是觉得这个是比较不错的,这里做一个记录. gitHub:https://github.com/mozilla/pdf.js 这是一个开源 ...
- asp.net在线阅读pdf
我后台上传一个pdf到游览器,现在想前台让游客可以观看,但是客户端不用安装阅读器就能查看,请教各位 客户端不安装,怎么能读取啊?还是要插件支持的. 不按章阅读器?额 也可以 用c#解析pdf 读取文本 ...
- PDF格式的“在线阅读”和“下载”
产生背景: 一个需求,用户可在线阅读PDF,也可下载到本地.听需求来源说人家的网站上的可以做,问我们能做吗,需要这个功能,就要来了网址,看看页面. 问题:上传PDF文件后,发现访问地址在浏览器上打开, ...
- pdf怎么在线阅读？一键查阅并不难
PDF格式的文件已经成为现代生活中不可或缺的一部分,无论是学术论文.电子书.工作文件还是表格,都有可能以PDF格式出现.然而,为了读取这些文件,我们需要安装PDF阅读器,这在某些情况下可能会带来不便. ...
- pdf.js 在线浏览pdf组件构建与安装注意事项
为什么80%的码农都做不了架构师?>>> 1.简介 PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品. pdf.js 是一个主要用于HTML ...
- 怎样可以在线将pdf转换成jpg格式
pdf文件有很多种,但是处理它的方法只有一种,就是将其转换成可编辑的格式,虽然文字类的pdf文件我们经常看到,但是图片格式的也不少,今天就先以pdf转图片为例,说说转换pdf文件格式的方法. 在线就能 ...
- 8个实现在线浏览PDF文件的实用jQuery插件
在web开发当中我们经常需要进行需要在线浏览PDf内容,在线嵌入动态pdf,传统的解决方法安装客户端PDF阅读器,如果是在谷歌是可以在线浏览的,因为他自身就带了一些插件,以前遇到这样的问题往往是费时又 ...
- 微信公众号或者浏览器实现在线浏览pdf文件
微信公众号或者浏览器实现在线浏览pdf文件 实现在线浏览pdf文件方法 开发步骤: 实现在线浏览pdf文件方法 我们在日常的开发当中经常需要实现pdf文件的显示,最近做了一个在微信公众号中实现pdf浏 ...
- nodejs+vue+elementui图书在线阅读网站系统express
在线阅读系统前端技术:nodejs+vue+elementui是将在线阅读管理系统功能模块主要分为管理员模块.管理员添加读者管理.图书信息管理,出版社管理.我的收藏管理等操作 本系统结合计算机系统的结 ...
最新文章
- python合并两个有序列表（list）
- 斯坦福全球AI报告：人才需求两年暴增35倍，中国机器人部署量涨500%
- 记录一下PyQt5界面导入Python(绕开pyqt5-tools安装失败问题)
- 爱吃苹果的与喜欢篮球的没必要非得达成一致~
- SAP CRM WebClient UI和Hybris CommerceUI tag的渲染逻辑
- 怎么在ReactNative里面使用Typescript
- python中二进制整数_Python程序查找表示二进制整数的必要位数
- 移动端touch与click
- c语言程序设计小学期论文,c语言程序设计小学期.pdf
- Sharpmap AjaxMapControl 分析
- 简单批处理内部命令简介(转)
- xp共享文件win7访问时不能保存密码
- Lotus notes 通讯录的导入导出
- mathematica7.0 汉下载及汉化
- 数字转为汉语中人民币的大写
- AndrOid系统亭子运行,饼干智能好物开箱 篇二十二：给父母换个手机，让他成楼下凉亭的拍照KOL...
- 使用电脑过程中突然无法复制粘贴了
- hdu 5510 Bazinga (尺取法)
- 使用xlnt库读取excel中文乱码
- TP-LINK 企业路由器 PPTP 配置