使用场景及原因
- 实际业务中，一些说明书或协议仅支持用户在线预览，为避免用户自行下载，并进行修改，引发纠纷，特将文件已文件流的形式，传给前端并转为图片显示，此时可能会有人问，为什么不直接在后端转图片，前端直接展示呢？那是因为当系统用户数量较高时，高并发会时服务器有很大的压力，可能会导致系统压测不能通过，前端转图片，可以将处理压力分摊至每个客户端。
- 本次操作为Vue.js + pdf.js
- 本案例是本人写的一个小demo，有问题的同学，或运行不了，欢迎评论区留言探讨
- 因个人需求不同，并未做打包处理，可自行单独下载文件，下载地址：
- qs ：https://pan.baidu.com/s/1061b1m4TU9wodKD9pUnA3w | x9z6
- axios ：https://pan.baidu.com/s/19OAkzPSqMKyxTayc5uO6IA | 1pmt
- vue ：https://pan.baidu.com/s/1mPArC55yCjlgN0Xt8abKkQ | 5eyk
- pdf ：https://pan.baidu.com/s/1gnUkYSpKa0M08wm6k8oScw | addd （ 负责API解析）
- pdf.worker : https://pan.baidu.com/s/1LWPD88CE9EQ9ieSv4k6smA | wbi2 ( pdf.worker 需要放在pdf.js 相同的目录—— 负责核心解析 ）
- polyfill ：https://pan.baidu.com/s/122iutoH-P5jDWLKtRiAPQg | g3tq
<div id="app" v-cloak>
<p><a @click="showAgreementBook">预览产品说明书</a></p>
<div class="pdfList"></div>
</div>
<!--由于axios默认发送请求时，数据格式是Request Payload，并非我们常用的Form Data格式，后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。-->
<script src="js/lib/qs-6.5.1.min.js"></script>
<script src="js/lib/axios-0.19.2.min.js"></script>
<script src="js/lib/vue-2.6.11.min.js"></script>
<script src="js/lib/pdf.js"></script>
<!-- HTML中直接引入vue.js 文件，IE下显示不正常，而且还报错：**[Vue warn]: Error in v-on handler: "ReferenceError: “Promise”未定义"**-->
<script src="js/lib/polyfill.min.js"></script>
<!-- <script src = "https://polyfill.io/v2/polyfill.min.js"></script> -->
<script>
var app = new Vue({
el: "#app",
data: {
insBookData: '', // 协议说明书文件流
},
mounted:funciton(){
this.instructionBook('MC002')
},
methods: {
// 获取协议说明书文件流
instructionBook: function (code) {
var _this = this
axios({
method: 'post',
url: 'XXXX',
data: Qs.stringify({prodCd: code}),
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
}).then(function (res) {
_this.insBookData = 'data:application/pdf;base64,' + res.data.ITReq
})
},
// base64 转blob ，用作处理IE兼容
dataURItoBlob: function (base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]); //base64 解码
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; //mime类型 -- image/png
var ia = new Uint8Array(byteString.length); //创建视图
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
},
// 点击按钮 预览操作
showAgreementBook: function () {
// for IE
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var blob = this.dataURItoBlob(this.insBookData)
window.navigator.msSaveOrOpenBlob(blob);
} else {
var pdfList = document.querySelector('.pdfList')
pdfList.innerHTML = ''
var loadingTask = pdfjsLib.getDocument(this.insBookData);
loadingTask.promise.then(function (pdf) {
var pages = pdf.numPages // 获取pdf文件页数
for (var i = 1; i <= pages; i++) {
pdf.getPage(i).then(function (page) {
var scale = 1.3;
var viewport = page.getViewport({scale: scale});
var canvas = document.createElement('canvas') // 生成canvas画布
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
}
pdfList.appendChild(canvas) // 追加canvas元素至页面中
page.render(renderContext); // 渲染
});
}
});
}
}
}
});
</script>
