Vue中使用 pdf.js

Vue中使用 pdf.js

后端代码：SpringBoot整合pdf.js

• pdf.js下载地址

http://mozilla.github.io/pdf.js/
下载的pdf包放在static文件目录下

• 由于后端返回的数据是文件的路径，貌似还解决了一个跨域的问题，所以就直接使用的路径，用的这个pdf的模板

//接收到的数据：data: "http://file.huistone.com/projectPdf/2020/09/12/c59fc07eb05f4076a7e6d00dbff854b9/单级放大电路.pdf"
window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent(res.data))

出来的是这样的，可以放大缩小，打印

• 还有一种后台返回的数据格式，不是文件路径的，就需要做一下配置：但本人还没有测试过

 this.axios({
 	methods: 'get',
 	//请求中需要配置：
 	withCredentials: false,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    responseType:'blob',
    mineType:'text/plain; charset=x-user-defined', 
 	params:{
 		"projectId": "2"
	}
 }).then( response => {
 	if (response.status == 200) {
 		//接收数据之后配置一下
    	let blob = new Blob([response.data], {type: "application/octet-stream"});
	    let pdfUrl = window.URL.createObjectURL(blob);
        // console.log(response.data);//请求成功，response为成功信息参数
        // this.pdfUrl = response.data;
        window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent(pdfUrl))
    } else {
	    console.log(response.message);//请求失败，response为失败信息
    }
 });

PS：如果是这样的完整路径：

"http://file.huistone.com/projectPdf/2020/09/12/c59fc07eb05f4076a7e6d00dbff854b9/单级放大电路.pdf"

想要在页面模块区域直接显示，可以直接使用

<iframe src="http://file.huistone.com/projectPdf/2020/09/12/c59fc07eb05f4076a7e6d00dbff854b9/单级放大电路.pdf" frameborder="0" style="width:700px;height:800px"></iframe>