我使用前端开发框架是vue,有一个打印PDF文档的需求.
这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机.
所以这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开pdf文件的表现不太好.如果是在 win7+ie11 的环境下会直接下载文件, 而且直接打开pdf在 ie,firefox,chrome 三大环境下的表现都不太统一.
所以根据需求, 我最开始使用了vue-pdf
安装vue-pdf
npm install --save vue-pdf
新建一个vue,命名为vpdf
<template><pdf src="./static/relativity.pdf"></pdf></template><script>import pdf from 'vue-pdf'export default {components: {pdf}}
3.引入到需要预览的页面使用vpdf标签
import vpdf form 'vpdf';components: {vpdf}
4.npm start 启动
使用vue-pdf很简单, 但是只能预览pdf不能打印,所以我放弃了这个思路.
接下来我尝试了 PDF.js
1.获取当前版本
git clone /mozilla/pdf.js.git
2.启动
cd pdf.jsnpm install -g gulp-clinpm installgulp server
3.访问 http://localhost:8888/web/viewer.html 可以预览和打印pdf,但是这时候要加入到自己的项目,就要编译pdf.js
4.编译
build pdf.js gulp generic //在src文件夹获取开发版gulp minified //获取生产版
5.vue-router路由
在vue下直接使用使用pdf.js的viewer.html有一个路径映射的问题,就是在服务器加载不出来,虽然可以把html改成vue模板加载,但是为了省事,我直接把编译好的min文件夹放在了static路径
6.通过带参数的url来访问PDF
http://localhost:8080/generic/web/viewer.html?file=qbs.pdf
参考
/kagome/p/kagome001.html/hyhbyl/article/details/20994945
