vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React

我使用前端开发框架是vue,有一个打印PDF文档的需求.
这个需求最开始是交给后台,可是明显不切实际, 由于后台服务器,根本就没法链接打印机.
因此这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开pdf文件的表现不太好.若是是在 win7+ie11 的环境下会直接下载文件, 并且直接打开pdf在 ie,firefox,chrome 三大环境下的表现都不太统一.
因此根据需求, 我最开始使用了vue-pdf

1. 安装vue-pdf

   npm install --save vue-pdf

2. 新建一个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 https://github.com/mozilla/pdf.js.git

2.启动

cd pdf.js
npm install -g gulp-cli
npm install
gulp 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

参考

http://www.cnblogs.com/kagome2014/p/kagome2014001.html
http://blog.csdn.net/hyhbyl/article/details/20994945