PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf

如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用

PDF http://mozilla.github.com/pdf.js/
XLS https://github.com/SheetJS/sheetjs
DOCX https://github.com/mwilliamson/mammoth.js (docx可以解析,doc 不行)
PPT https://github.com/SheetJS/js-ppt

vue项目中使用pdf.js预览pdf文件_shentibeitaokong的博客-CSDN博客

浏览器以只读方式打开PDF_程裕强的专栏-CSDN博客

项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js，

但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！

其实这和前端框架无关的，直接使用pdf.js原生

搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生

的是最好的啦！

首先肯定是导入插件，我是从官网直接下载，链接：点击打开链接，注意放在static文件目录下，

这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟（当然你可以选择性的删除里面的文件，比如绝大部分语言包）。目录结构放一下

其实就可以直接用的，网上很多，viewer.js 里的

用file= 的方式也可以打开哟，放在页面上使用，我是a进行嵌套或者 ifram

<a href="/static/pdf/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf" target="_blank">看pdf</a><a :href="'/static/pdf/web/viewer.html?file='+ pdfUrl"></a><iframe src="/static/pdf/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf" frameborder="0" width="100%" height="800px"></iframe><iframe :src="'/static/pdf/web/viewer.html?file='+ pdfUrl " frameborder="0" width="100%" height="800px"></iframe>

file参数中默认只允许传简单路径比如：http://www.a.com/file.php. 如果你要浏览的pdf路径为http://www.a.com/file.php?id=2001。这时候直接传入的话会解析出错，因为pdf.js无法判断id=2001是viewer.html的参数呢还是file.php的参数

这告诉我们 url必须进行encode编码把参数file后传入的动态参数中特殊字符转义：

这里又会有两种方法：

encodeURI() 把字符串编码为 URI
encodeURIComponent() 把字符串编码为 URI 组件

发现 encodeURI不会对:/?&等uri中起分割作用的字符进行编码；

encodeURIComponent则会。

所以必须选择 encodeURIComponent 进行对url的编码

后台返回文件流，前端实现预览pdf 后台返回文件流，前端实现预览pdf - 简书

document.getElementById('sourceFile').value = '' " //可以重复上传文件

//上传
<div class="upload"><inputtype="file"placeholder="选择文件"ref="avatarInput"@change="changeImage($event)"accept="application/msword, application/pdf" multiple="multiplt"/><span>{{clickUpload}}</span></div>
changeImage(e) {// 上传图片事件var files = this.$refs.avatarInput.files;//var files = e.target.files[0];var that = this;function readAndPreview(file) {//Make sure `file.name` matches our extensions criteriaif (/\.(jpe?g|png|gif)$/i.test(file.name)) {var reader = new FileReader();reader.onload = function (e) {// 防止重复上传if (that.imgDatas.indexOf(e.target.result) === -1) {that.imgDatas.push(e.target.result);}};reader.readAsDataURL(file);}}readAndPreview(files[0]);if (files.length === 0) {return;}// 文件上传服务器this.File = files[0];this.clickUpload = files[0].name;document.getElementById('sourceFile').value = '';},
let formData = new FormData();formData.append("File", this.File, this.File.name);//获取
<iframe :src="this.pdfUrl" frameborder="0" width="100%" height="800px"></iframe>
// accept="application/msword, application/pdf"  限制上传文件类型
// accept="image/*" — 接受任何图片文件类型.
data{ rerurn { pdfUrl:'' }}
//获取接口
axios({method: "get",url: "api/AuditContract/GetPDFContent",headers: {"Content-Type": "application/pdf",},params: {RandomCode: res.result,},responseType: "blob",}).then((response) => {console.log(response.data);//文件流this.pdfUrl = this.getObjectURL(response.data);//this.pdfUrl = window.URL.createObjectURL(response.data); 写这种就不需要下面的方法了(可以尝试一下)}).catch((error) => {console.log(error.data);});getObjectURL(file) {// console.log(file,'file')let url = null;if (window.createObjectURL !== undefined) {// basic// url = window.createObjectURL(file)var binaryData = [];binaryData.push(file);url = window.URL.createObjectURL(new Blob(binaryData, { type: "application/pdf" }));} else if (window.webkitURL !== undefined) {// webkit or chrometry {// url = window.webkitURL.createObjectURL(file);var binaryData = [];binaryData.push(file);url = window.URL.createObjectURL(new Blob(binaryData, { type: "application/pdf" }));} catch (error) {console.log(error);}} else if (window.URL !== undefined) {// mozilla(firefox)try {// url = window.URL.createObjectURL(file);var binaryData = [];binaryData.push(file);url = window.URL.createObjectURL(new Blob(binaryData, { type: "application/pdf" }));} catch (error) {console.log(error);}}return url;},

这样如此就ok了

viewer.html 修改

整个顶部bar 隐藏
<div id="toolbarViewer" style="display:none"></div>隐藏并且取消打印和下载按钮和事件 (pointer-events: none 使事件点击不生效)<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" style="display: none;pointer-events: none" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span> </button><button id="download" class="toolbarButton download hiddenMediumView" title="Download"
style="display: none;pointer-events: none" tabindex="34" data-l10n-id="download"><span data-l10n-id="download_label">Download</span> </button>

pdf.js禁掉下载和打印的功能

<script>// 禁止ctrl + sdocument.addEventListener("keydown", function (e) {if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {e.preventDefault();e.stopPropagation();}}, false);// 禁止鼠标右击function stop() {return false;}document.oncontextmenu = stop;//屏蔽 F12function testKeyDown(event) {if ((event.keyCode == 123)) {event.keyCode = 0;event.returnValue = false;}}document.onkeydown = function () { testKeyDown(event); }window.onhelp = function () { return false; }</script>

PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf相关推荐

前端在线预览PDF文件
如何在vue项目中预览PDF格式的文件需求:在vue3.x项目中预览pdf文件提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐, ...
html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
html浏览pdf文件,HTML网页在线预览PDF文件
image.png image.png 今日工作需要,需要在线预览PDF文件,so,做了个研究,下面将网页在线预览pdf的方法做个梳理,大家共同学习成长吧方法分为三种 1. 方法1-embed标签 ...
vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式
背景:正好最近碰到了这种需求,记录下来,方便以后查看. 后端返回的文件流数据如下图所示: 后台返回数据.png 一.pdf的预览一开始的时候百度了很多方法,有建议用pdfJs插件的,有iframe嵌 ...
Vue中实现文件流格式图片预览
需求:后端接口返回文档流格式图片,如何在页面中显示显示并预览? 思路: 设置 axios responseType: 'blob':传送门:JavaScript Blob 对象详解 URL.creat ...
Springboot 以输出流形式在线预览PDF 文件分存储 (本地/远程)
原因:本来是前端直接用url 显示pdf.但是url 容易暴露. 后来使用后台返回文件流的形式输出.前端显示.不多说直接上代码 1.文件存在服务器本地 @RequestMapping(value = ...
php执行只读文件,php实现以只读方式打开文件的方法
php实现以只读方式打开文件的方法这篇文章主要介绍了php实现以只读方式打开文件的方法,实例分析了php中fopen函数的功能及使用技巧,需要的朋友可以参考下本文实例讲述了php实现以只读方式打开 ...
javascript下载文件几种方式，接收后台返回流下载或直接下载文件
目录 1 javascript下载文件7中方式 1.1 window.location.href下载 1.2 window.location下载 1.3 iframe下载 1.4 form表单的形式下 ...
vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...

PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf

pdf.js禁掉下载和打印的功能

PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf相关推荐

最新文章

热门文章