pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式

ViewerJS简介

ViewerJS的繁重工作是由这些令人敬畏的项目完成的：

PDF.js（由Mozilla提供）

WebODF（由KO GmbH提供）

运行ViewerJS就像创建链接一样简单。您可以使用它来提供全屏演示，也可以用于在您的网站中内嵌显示文档或作为文档链接的查看器。由于浏览器保护自己免受安全风险（这是一件非常好的事情）的方式，ViewerJS仅适用于驻留在您自己的服务器上的文档。ViewerJS是完整且独立的 - 它不依赖于其他服务。官网地址：https://viewerjs.org/instructions/

两种方式都需要做的事：

1，下载PDF.js， http://mozilla.github.io/pdf.js/getting_started/#download

2，将解压出来的三个文件，放入到一个自定义名称的文件夹中，如文件夹命名为pdfjs

使用起来其实只有几句代码：

方式一：将 pdfjs 文件夹放到项目服务器目录下

优点：项目不需要增加打包内容

缺点：无法DIY

let prefixUrl = 'https://域名/pdfjs文件夹的目录路径/web/viewer.html?file=';
let pdfurl = 'https://域名/显示的pdf文件路径/'+ test.pdf;
window.open(prefixUrl + pdfurl)
// window.open(prefixUrl + encodeURIComponent(pdfurl)); 本地需要跨域

参考来源：https://blog.csdn.net/bianliuzhu/article/details/80622215

方式二：将 pdfjs 文件夹放到项目static文件夹下

优点：可以DIY

缺点：增加项目打包内容

let prefixUrl = '/static/pdfjs/web/viewer.html?file=';
let pdfurl = 'https://域名/显示的pdf文件路径/'+ test.pdf;
window.open(prefixUrl + pdfurl)

参考来源：https://blog.csdn.net/chen_3010/article/details/64126273

除了使用window.open打开新页面显示，还可以嵌入iframe，如

<iframe :src="currentUrl" id="iframe"></iframe>

pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式相关推荐

pdf.js——在线预览下载打印pdf文件插件
html页面使用下载PDF.js, http://mozilla.github.io/pdf.js/getting_started/#download 将 pdfjs 文件夹放到项目static ...
pdf.js在线预览PDF文件实现
pdf.js是一款功能比较强大的在线预览PDF插件,自带"打印","搜索","翻页"等功能,强大且实现方便,并且兼容性比较好(兼容ie10及 ...
使用iText动态生成pdf，并用pdf.js在线预览
Java有很多生成pdf的工具库,常用的有Apache PdfBox,iText,POI.我的项目里用的是iText. 下面说下详细步骤: 后台引入依赖: &l ...
vue版pdf.js 在线预览pdf文件流
1.简介由于我使用的是若依版的vue前端框架(ElementUI二开),因此不知道为什么在前端配置pdf.js一直无法生效,所以换了一个思路,将pdf.js相关文件放置在后台代码中,以访问后台页面的 ...
pdf.js在线预览ppt SaveAs : PowerPoint 无法将 ^0 保存到 ^1
public void pptToPdf(String srcFilePath, String pdfFilePath) throws Exception {ActiveXComponent app ...
java文件预览_java 在线预览doc，pdf
先说一说如何实现在线预览doc网上查了很多资料,基本思路就是将doc 转为 pdf,由于低版本浏览器不支持预览pdf,所以基本是再将pdf 转为 swf. 由于我这次做的需求只需要兼容chrome即可 ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
html 打印预览兼容,vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...

pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式

pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式相关推荐

最新文章

热门文章