项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己先了解了一下，最后决定用pdf.js，

但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！

其实 这和前端框架无关的，直接使用pdf.js原生

     搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生

的是最好的啦！

   首先肯定是导入插件，我是从官网直接下载，链接：点击打开链接，注意放在static文件目录下，

这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟（当然你可以选择性的删除里面的文件，比如绝大部分语言包）。目录结构放一下



其实就可以直接用的，网上很多，viewer.js 里的

 

代表着文件路径，如果你项目中有个pdf文件，那直接相对路径就可以在页面预览，如果使用远程预览，其实这里的路径会被覆盖，你删不删除它自带的路径都不会影响你的远程预览，so我今天说的是远程预览（服务器端url预览），pdf.js也提供了一种方法，



用file= 的方式也可以打开哟，放在页面上使用，我是iframe进行嵌套



    用这种方式必不可少的是跨域问题，你存储文件的服务器路径会和项目产生跨域，我的解决办法是，让后台返回流的形式返回文件，后台代码案例：

 

注意：

 

1    pdf.js是不支持跨域文件加载的  直接加载是不会成功的。会报  “file origin doesnot match viewer”错误。 所以我们得改变一下源码



把这句警告直接注释就行了

 

2    file参数中默认只允许传简单路径比如：http://www.a.com/file.php.  如果你要浏览的pdf路径为http://www.a.com/file.php?id=2001。 这时候直接传入的话会解析出错， 因为pdf.js无法判断id=2001是viewer.html的参数呢还是file.php的参数

 这告诉我们 url必须进行encode编码  把参数file后传入的动态参数中特殊字符转义：

这里又会有两种方法：

encodeURI() 把字符串编码为 URI

encodeURIComponent() 把字符串编码为 URI 组件

发现        encodeURI不会对:/?&等uri中起分割作用的字符进行编码；

encodeURIComponent则会。

所以必须选择 encodeURIComponent 进行对url的编码

举例：



这样如此就ok了

 

3  

如果 后台返回给前台的流的url形式 是

https://xxx.com/api/esm/v1/contractTemplates/load?id=13&access_token=a33e14ef6aba87b593b1aac31e3d97bb

 



这样pdf.js插件是无法识别的，所以的在最后加上 &.pdf  来骗过插件

效果图



上面是pc端的，移动端也同样试用，这里以微信为例，ios可以用自带的微信浏览器来进行pdf的预览，而安卓则必须用pdf.js来预览pdf咯，分辨ios与安卓的方法，我的博客里有哟！谢谢观看，一起交流进步！

当然这是用iframe打开的，我这里也提供一种不是iframe打开的样式，因为pdf.js本质上是用canvas渲染的，我也是借鉴了他人的代码，具体我也忘了，放一下demo效果,(注意查看服务器返回流，token会失效，你测试的时候会报错，我只是告诉你怎么写而已，谢谢)



最后补上demo链接 ：vue-pdf.js-demo

如果对你有所帮助的话，欢迎star！ 谢谢

 

 

 

 

 

 

 

 

 

 

 

 

2020-12-28更新  新建了一个群 如有问题不能及时回复可加群咨询 805371278



ps：如要私信，请直接说问题。

https://view.officeapps.live.com/op/view.aspx?src= 用这个 链接 拼接 后端给你返回的 数据 直接在浏览器中打开 可以快捷测试后端返回的 数据 是否 符合要求
最近写了个有 预览word 、Exce、ppt以及pdf文件 的后台 管理 在网上也找了 很多

就感觉很复杂 ，当然最后还是实现了 ， 本博主一项喜欢简单  越简单越好 越好理解
废话不多说 先上效果图 （我就喜欢那种有图的代码 能预览一下是不是自己想要的效果）
1.显示页面



2，预览效果

word



2.exce



3.ppt  没有  但是都一样
4.pdf



1.  首先说 预览 word 、Exce、ppt

代码
handleEdit 是上图中预览按钮 参数  row 是每一行数据

if (!/.(pdf|PDF)$/.test(row.wjYsmc))  是判断文件格式是否为pdf

不是就执行 以下代码

window.open( “https://view.officeapps.live.com/op/view.aspx?src=” + this.yuming + “/zhengCe?id=” + row.id, “_blank”);
https://view.officeapps.live.com/op/view.aspx?src=   是官网提供的方法

官方网址：https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/
src 后面是你文档的地址 或者是你下载的地址

注意：

要有域名
要在公网能连接到
最好不要有什么访问权限 当然 带参数是可以

我是在新窗口打开的（很简单 一行代码）
.vue
this.yuming + “/zhengCe?id=” + row.id,  拼接的地址
methods: {
	handleEdit(index, row) {
        if (!/\.(pdf|PDF)$/.test(row.wjYsmc)) {
        // 不是pdf格式
          window.open(
            "https://view.officeapps.live.com/op/view.aspx?src=" + this.yuming + "/zhengCe?id=" + row.id,
            "_blank"
          );
          return false;
        } else {
        // pdf 格式
          let url = this.yuming + "/anli?id=" + row.id
          this.viewVisible = true
          this.pdfsrc = url
        }
      },
}

2. pdf
代码

我是把预览放在一个弹框里面的

首先引入一个pdf包 npm 安装



选择在有 node_modules 文件的 的文件夹

在控制台 cd 到 你的 projectV 这个文件夹 运行下面的代码  （我的是 projectV，每个人命名不一样）
npm install --save vue-pdf

.vue
url 就是 pdf 文件的 地址  和上面 office文件地址 一样 赋值给 pdfsrc
<template>
	<el-dialog title="预览" :visible.sync="viewVisible" width="100%" height="100%" :before-close='closeDialog'>
        <div class="pdf" v-show="fileType === 'pdf'">
          <pdf :src="pdfsrc" ></pdf>
       	</div>
    </el-dialog>
</template>

<script>

// 引入刚才下载的 pdf 
import pdf from 'vue-pdf'

  export default {
  
    components: {
      pdf
    },
    
    data() {
    	yuming: "https://xxx.xxxxxxx.xxxx/m",  // 域名  管理方便一点  /m 域名下的文件夹
    	viewVisible: false, // 弹框隐藏
   		fileType: 'pdf', // 文件类型
        pdfsrc: '',  // 文件地址
    },
    
    created() {
      // 有时PDF文件地址会出现跨域的情况,最好先处理一下
      this.pdfsrc = pdf.createLoadingTask(this.pdfsrc)
    },
    
    methods: {
    
		handleEdit(index, row) {
        //console.log(row.wjYsmc)
        if (!/\.(pdf|PDF)$/.test(row.wjYsmc)) {
          window.open(
            "https://view.officeapps.live.com/op/view.aspx?src=" + this.yuming + "/anli?id=" + row.id,
            "_blank"
          );
          return false;
        } else {
          let url = this.yuming + "/anli?id=" + row.id
          this.viewVisible = true
          this.pdfsrc = url
        }
      },
      
      closeDialog(done) {
        done();
      },
	}
    
 }
</script>

还有 模板 链接 后台管理模板

  前言：最近一个安卓项目需要爬取网页上的PDF，并通过ImageView展示，然后发现网上基本都是利用pdfbox和ImageIO来处理的，但是安卓并不支持ImageIO，于是利用安卓自带的PdfRenderer来解决这一问题。
1.获取PDF流
  爬虫工具因人而异，我选择的是Jsoup：
connection = Jsoup.connect(url);
connection.header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36");
response = connection.cookies(cookies_innet).cookies(cookies).ignoreContentType(true).followRedirects(true)
                .method(Connection.Method.GET).execute();

  url为PDF下载链接，最终我们返回了一个response，我们打印response的contentType：
System.out.println(response.contentType());

结果为：
application/pdf

2.利用pdfbox保存为png文件
  这里先讲利用pdfbox来将pdf流存为jpg或者png文件：
<dependencies>
    <dependency>
        <groupId>org.apache.pdfbox</groupId>
        <artifactId>pdfbox</artifactId>
        <version>2.0.4</version>
    </dependency>
</dependencies>

  先获取response的bodyStream()：
BufferedInputStream in = response.bodyStream();

  接着存入文件：
ocument doc = PDDocument.load(in);
PDFRenderer renderer = new PDFRenderer(doc);
int pageCount = doc.getNumberOfPages();
for(int i = 0; i < pageCount; i++) {
    BufferedImage image = renderer.renderImageWithDPI(i, 500);
//    BufferedImage image = renderer.renderImage(i, 1.0f);
    ImageIO.write(image, "PNG", new File("total.png"));
}

  但令人遗憾的是，安卓当中并不允许使用ImageIO，所以我们只能利用安卓自带的处理PDF的包：

      android.graphics.pdf.PdfRenderer
3.安卓自带的PdfRenderer
  首先我们先将pdf流保存为pdf文件：(这一步是否需要我也不太清楚，我是觉得下方生成ParcelFileDescriptor对象需要一个PDF文件对象，于是就先保存为PDF文件了)
static void saveImage(BufferedInputStream in) throws IOException {
    System.out.println(Environment.getExternalStorageDirectory() +"/score.pdf");
    File file=new File(Environment.getExternalStorageDirectory() +"/score.pdf");
    int index;
    byte[] bytes = new byte[1024];
    FileOutputStream out = new FileOutputStream(file);
    while ((index = in.read(bytes)) != -1) {
        out.write(bytes, 0, index);
        out.flush();
    }
    in.close();
    out.close();
}

  接着利用该PDF文件生成一个PdfRenderer对象：
File file = new File(Environment.getExternalStorageDirectory() +"/score.pdf");
ParcelFileDescriptor pdfFile = ParcelFileDescriptor.open(file, ParcelFileDescriptor.MODE_READ_ONLY);
PdfRenderer renderer = new PdfRenderer(pdfFile);

  最后将renderer转为Bitmap并利用ImageView展示：
final int pageCount = renderer.getPageCount();//获取pdf的页码数
Bitmap[] bitmaps=new Bitmap[pageCount];//新建一个bmp数组用于存放pdf页面
Display display = getWindowManager().getDefaultDisplay();
Point outSize = new Point();
display.getSize(outSize);//不能省略,必须有
int screenWidth = outSize.x;//得到屏幕的宽度
int screenHeight = outSize.y;//得到屏幕的高度
for (int i = 0; i < pageCount; i++) {
    PdfRenderer.Page page = renderer.openPage(i);//根据i的变化打开每一页
    Bitmap bitmap = Bitmap.createBitmap(page.getWidth() * screenWidth / page.getHeight(), screenWidth, Bitmap.Config.ARGB_8888);//根据屏幕的高宽缩放生成bmp对象
//    bitmap = adjustPhotoRotation(bitmap, 90);
    page.render(bitmap, null, null, PdfRenderer.Page.RENDER_MODE_FOR_DISPLAY);
    bitmaps[i] = bitmap;
    page.close();
}
imageView.setImageBitmap(bitmaps[0]);

使用pdfjs目的是为了打开pdf的文件，打开pdf文件有了两种方式，一种是直接打开pdf 的文件，一种是打开pdf 的文件流。传参的话，直接打开PDF文件很简单，这里就不赘述了；打开文件流会出现两个？，只需要在viewer.js文件中设置一下file可以了，然后就没有然后了。当然下面的实现方法只是一个参考，具体的实现有很多种，我在网上就看到很多大神的奇思妙想（还有的在后台直接拼接请求地址的），我们这里就单刀直入了。
1、PDF.js下载：

下载链接：http://mozilla.github.io/pdf.js/

下载下来的压缩包包含两个文件夹：build和web，打开web文件夹下的viewer.html，就能看到PDF的预览效果了。

预览的PDF文件是位于viewer.html同目录下的compressed.tracemonkey-pldi-09.pdf，

而设置加载这个文件的地方是：与viewer.html同目录下的viewer.js的DEFAULT_URL属性，修改这个属性的值就能够预览不同的文件，中英文的pdf文件都能成功预览。
2、功能使用：

使用pdf.js在web页展示pdf文件的关键是打开viewer.html，也就是在web页打开一个html，可以用的方法至少有两三种：

a、a标签：使用pdf.js展示pdf文件</>

b、window.open：window.open(“PDFJS\web\viewer.html”);

c、iframe：< iframe  src="\web\viewer.html" />
3、在客户端预览服务器端的文件：使用文件流进行解决

以我此次使用的情况为例，我使用的iframe进行展示：

第一步：设置iframe的请求路径：

var src=“pdfjs/web/viewer.html?file=/testWeb/openDocInPdf.action”;
说明：

a、pdfjs/web/viewer.html这个必须带，没什么可说的
b、若是从服务器端请求文件，必须使用file这个关键字，用来告知pdf.js你这个是文件流。我是怎么知道的？百度+源码。看网上的demo时说要用这个关键字，我也纳闷你怎么知道要用这个关键字，就去看源码了，跟踪的过程中，发现viewer.js的webViewerInitialized()的方法中有这么一句：

file = ‘file’ in params ? params.file : appConfig.defaultUrl;

这就很明显了，你要是没有file我就使用默认值。所以必须用file关键字。
第二步： 使用iframe进行请求：

$(“body”).append("<iframe  width=“100%” height=“100%” src=’"+src+"’ />");
第三步：action请求：

Java代码
HttpServletResponse response = ServletActionContext.getResponse();  
response.setContentType("application/pdf");  
FileInputStream in = new FileInputStream(pdfFile);  
OutputStream out = response.getOutputStream();  
  
byte[] b = new byte[1024];  
while ((in.read(b)) != -1) {  
    out.write(b);  
}  
out.flush();  
in.close();  
out.close();  

当然在实际应用中，经常牵涉到带参数的问题，这就是后面要说的第四个点了。
4、带参数进行文件请求：

带参数的URL通常都这么写： openDocInPdf.action?id=123，

按照一般情况处理，此处应该是：var src=“pdfjs/web/viewer.html?file=/testWeb/fileRouter!openDocInPdf.action?id=123”;

按照这个路径去请求最后的请求链接会变成：http://127.0.0.1:8080/testWeb/openDocInPdf.action?id，这样子的请求路径必然会报错，那么为什么会这样子呢？还是viewer.js的webViewerInitialized()，里面处理链接的代码是这样子的：

Js代码
var appConfig = PDFViewerApplication.appConfig;  
var file = void 0;  
var queryString = document.location.search.substring(1);  
//alert(queryString);//结果：file=/testWeb/fileRouter!openDocInPdf.action?id=123，  
var params = (0, _ui_utils.parseQueryString)(queryString);  
//alert(params.file);//结果：testWeb/openDocInPdf.action?id  
file = 'file' in params ? params.file : appConfig.defaultUrl;  
validateFileURL(file);  

看结果就知道问题出在第四行，第四行的parseQueryString方法如下：

Js代码
function parseQueryString(query) {  
 var parts = query.split('&');  
 var params = Object.create(null);  
  for (var i = 0, ii = parts.length; i < ii; ++i) {  
    var param = parts[i].split('=');  
    var key = param[0].toLowerCase();  
   var value = param.length > 1 ? param[1] : null;  
    params[decodeURIComponent(key)] = decodeURIComponent(value);  
  }  
 return params;  
}  

这下应该知道请求链接为什么会变成那个样子了。
其实上面的例子存在一个问题，细心的可能已经发现了，那就是请求链接的问题：var src=“pdfjs/web/viewer.html?file=/testWeb/fileRouter!openDocInPdf.action?id=123”，一个url中不可能存在多个?，只有第一个参数用?其他的都用&，如果这个请求换成&号会怎么样，会不会就没有问题了呢？？

假设请求是这个样子的：var src=“pdfjs/web/viewer.html?file=/testWeb/openDocInPdf.action&id=123”，viewer.js的webViewerInitialized()的执行结果就是：

Js代码
var appConfig = PDFViewerApplication.appConfig;  
var file = void 0;  
var queryString = document.location.search.substring(1);  
//alert(queryString);//结果：file=/testWeb/openDocInPdf.action&id=123  
var params = (0, _ui_utils.parseQueryString)(queryString);  
//alert(params.file);//结果：testWeb/openDocInPdf.action  
file = 'file' in params ? params.file : appConfig.defaultUrl;  
validateFileURL(file);  

最后就变成了没有参数。
接下来说解决办法，我觉得至少有两种：

第一种： parseQueryString()方法中起关键作用的是split("=")，带参数的时候因为有多个等号除第一个之外的其他都没干掉了，那么我若是保证这个url中只有file=这儿的一个等号呢，于是就可以改成：

var src = “pdfjs/web/viewer.html?file=”+encodeURIComponent("/testWeb/openDocInPdf.action?id=123");

如此就会变成：file=%2FtestWeb%2!openDocInPdf.action%3Fid%3D123

最后的请求链接就是：http://127.0.0.1:8080/testWeb/fileRouter!openDocInPdf.action?id=123，这样子的请求是正确的。
第二种：改处理方法，人为的定义file中的值：

将webViewerInitialized()中处理参数的代码改成：

Js代码
var appConfig = PDFViewerApplication.appConfig;  
var file = void 0;  
var queryString = document.location.search.substring(1);  
/*注释掉原来的参数处理方法 
var params = (0, _ui_utils.parseQueryString)(queryString); 
file = 'file' in params ? params.file : appConfig.defaultUrl; 
*/  
//使用一下的代码进行处理  
if(queryString.split("file2=").length>0){  
    file = queryString.split("file2=")[1];  
}else{  
    file = appConfig.defaultUrl;  
1}  
validateFileURL(file);  

然后iframe的src改成： var src=“pdfjs/web/viewer.html?file2=/testWeb/openDocInPdf.action?id=123”;

如此请求就会变成：http://127.0.0.1:8080/testWeb/openDocInPdf.action?id=123

至此，带参数的问题解决。