pdf预览 pdf.js+pdfObject

1.下载pdf.js

第一步，下载源码：git clone git://github.com/mozilla/pdf.js.git （直接github下载zip 不能直接使用）

第二步，cd pdf.js

第三步，安装node.js

https://nodejs.org/en/download/

第四步，安装gulp

npm install -g gulp-cli

第五步，安装pdf.js的依赖库

npm install

第六步，启动本地web服务，因为有的浏览器不允许用file://协议打开pdf文件

gulp server

第七步，构建PDF.js

gulp generic

将在/build/generic / build /目录中生成pdf.js和pdf.worker.js。这两个脚本都是必需的，但是只有pdf.js需要被包含，因为pdf.worker.js将由pdf.js加载。如下图

2.将generic 文件拷到项目中，拷贝需要的，因为它很大

3.下载pdfObject.js

https://github.com/pipwerks/PDFObject/

4.在html 中引用pdf.js和pdfObject.js

  <div class="pdf_content" id="pdf_content"></div><script src="/js/pdfobject.js" ></script><script src="/generic/build/pdf.js" ></script>  <script type="text/javascript">var  options= {forcePDFJS: true,PDFJS_URL: "/generic/web/viewer.html"};if(PDFObject.supportsPDFs){PDFObject.embed("写你pdf的地址", "#pdf_content",options);} else {$.modal.alertError("浏览器不支持预览!");console.log("Boo, inline PDFs are not supported by this browser");}</script>

ps:1.在单独只运用pdfObject.js时，文件预览时偶尔会遇到预览文件名不对应，但文件内容是正确的。也没有找到单独禁用预览文件名的方法。所以与pdf一起结合使用。

2.如果是在vue中，注意要把generic文件拷贝到static目录下。

pdf预览 pdf.js+pdfObject相关推荐

一个使用js做的一个PDF预览PDF标注（在线批注）工具
一个使用js做的一个PDF预览&PDF标注工具核心主要使用pdf.js以及操作canvas 目前支持web端,windows端,mac端,可npm包引入项目目前支持的功能有大文件预览.缩略 ...
java pdf 预览_pdf.js实现图片在线预览
项目需求前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
pdf预览-pdf.js预览base64格式的数据
前言 pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) 以下是p ...
前端 PDFObject.embed预览PDF，另类方式隐藏工具条样例
<body> <div id="divid"></div> </body> <script > var filePath ...
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
html js 在线预览 pdf word xls等
1.前端实现pdf文件在线预览功能方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <a ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
js在线预览pdf,doc,xls,jpg等文件
由于项目需要,需要在上传文件后在线预览所上传的文件.最开始我的思路就是想到各种插件什么的.比如说pdf.js.pdfobject,但最后都没能达到我所想要的效果. 最后我发现,原来,只需要一个很简单的 ...

pdf预览 pdf.js+pdfObject

pdf预览 pdf.js+pdfObject相关推荐

最新文章

热门文章