<p><code></p> <p>我使用前端开发框架是vue,有一个打印PDF文档的需求.<br />这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机.<br />所以这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开pdf文件的表现不太好.如果是在 win7+ie11 的环境下会直接下载文件, 而且直接打开pdf在 ie,firefox,chrome 三大环境下的表现都不太统一.<br /> 所以根据需求, 我最开始使用了vue-pdf</p> <ol> <li>安装vue-pdf <p>npm install --save vue-pdf</p> </li> <li>新建一个vue,命名为vpdf</li> </ol> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> <pdf src=&quot;./static/relativity.pdf&quot;></pdf> </template></p> <p><script><br /> import pdf from 'vue-pdf'</p> <p>export default {<br /> components: {<br /> pdf<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">pdf</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./static/relativity.pdf"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pdf</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> pdf <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-pdf'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">components</span>: { pdf } }</span></code></pre> <p>3.引入到需要预览的页面使用vpdf标签</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import vpdf form 'vpdf'; components: { vpdf } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-keyword">import</span> vpdf form <span class="hljs-string">'vpdf'</span>; <span class="hljs-string">components:</span> { vpdf } </code></pre> <p>4.npm start 启动</p> <p>使用vue-pdf很简单, 但是只能预览pdf不能打印,所以我放弃了这个思路.</p> <p>接下来我尝试了 PDF.js</p> <p>1.获取当前版本</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="git clone https://github.com/mozilla/pdf.js.git " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">git clone <span class="hljs-string">https:</span><span class="hljs-comment">//github.com/mozilla/pdf.js.git </span></code></pre> <p>2.启动</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cd pdf.js npm install -g gulp-cli npm install gulp server" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">cd</span> <span class="hljs-string">pdf.js</span> <span class="hljs-attr">npm</span> <span class="hljs-string">install -g gulp-cli</span> <span class="hljs-attr">npm</span> <span class="hljs-string">install</span> <span class="hljs-attr">gulp</span> <span class="hljs-string">server</span></code></pre> <p>3.访问 <a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8888/web/viewer.html 可以预览和打印pdf,但是这时候要加入到自己的项目,就要编译pdf.js<br />4.编译</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="build pdf.js gulp generic //在src文件夹获取开发版 gulp minified //获取生产版" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">build</span> <span class="hljs-string">pdf.js </span> <span class="hljs-attr">gulp</span> <span class="hljs-string">generic //在src文件夹获取开发版</span> <span class="hljs-attr">gulp</span> <span class="hljs-string">minified //获取生产版</span></code></pre> <p>5.vue-router路由</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="在vue下直接使用使用pdf.js的viewer.html有一个路径映射的问题,就是在服务器加载不出来,虽然可以把html改成vue模板加载,但是为了省事,我直接把编译好的min文件夹放在了static路径" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs swift"><code style="word-break: break-word; white-space: initial;">在vue下直接使用使用pdf.js的viewer.html有一个路径映射的问题,就是在服务器加载不出来,虽然可以把html改成vue模板加载,但是为了省事,我直接把编译好的<span class="hljs-built_in">min</span>文件夹放在了<span class="hljs-keyword">static</span>路径</code></pre> <p>6.通过带参数的url来访问PDF</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="http://localhost:8080/generic/web/viewer.html?file=qbs.pdf " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">http:</span><span class="hljs-comment">//localhost:8080/generic/web/viewer.html?file=qbs.pdf</span> </code></pre> <p>参考</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="http://www.cnblogs.com/kagome2014/p/kagome2014001.html http://blog.csdn.net/hyhbyl/article/details/20994945" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">http:</span><span class="hljs-comment">//www.cnblogs.com/kagome2014/p/kagome2014001.html</span> <span class="hljs-string">http:</span><span class="hljs-comment">//blog.csdn.net/hyhbyl/article/details/20994945</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25478.html