使用场景及原因
实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前端直接展示呢?那是因为当系统用户数量较高时,高并发会时服务器有很大的压力,可能会导致系统压测不能通过,前端转图片,可以将处理压力分摊至每个客户端。
本次操作为Vue.js + pdf.js
因个人需求不同,并未做打包处理,可自行单独下载文件,下载地址:
- 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
- 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>