vue-cli@3.0 axios将pdf二进制文件流转换成pdf文件
如果是本地pdf文件可参考https://blog.csdn.net/shentibeitaokong/article/details/80011900pdf文件流可参考https://www.jianshu.com/p/242525315bf6将以上两种结合在一起作为参考(通过引入pdf.js,iframe嵌入实现预览、打印功能)首先去vue-pdf.js-demo,将pdf下的所需...
·
如果是本地pdf文件可参考https://blog.csdn.net/shentibeitaokong/article/details/80011900
pdf文件流可参考https://www.jianshu.com/p/242525315bf6
将以上两种结合在一起作为参考(通过引入pdf.js,iframe嵌入实现预览、打印功能)
首先去vue-pdf.js-demo,将pdf下的所需的文件下载下来,由于文件比较大,可进行相应的删改。
然后将pdf对应的文件夹放入public文件夹下(也可放置在其他的文件夹下)
在对应的vue组件将iframe引入
<iframe v-if="showPdf" id='previewPdf' :src="fileUrl" height="406px"
width="100%">
</iframe>
我们试过的错,前人已经帮我们试过了,第二个链接的博主已经帮我们试过了(不过开始的时候一直没有成功)
按照第二个博主的写法,虽然成功了出来效果,但是页面一直空白,后来查了资料,进行了修改,然后就成功的显示了
new Promise((resolve, reject) => {
fetch({
url: api['repeit'].url || '',
method: 'post',
data: {
method:api['repeit'].method,
...params
},
responseType: 'blob'
}).then(function (response) {
var binaryData = [];
binaryData.push(response);
let url=window.URL.createObjectURL(new Blob(binaryData, {type:"application/pdf"}));
_this.fileUrl="./static/pdf/web/viewer.html?file="+encodeURIComponent(url);
}).catch(function (err) {
reject(err)
})
})
打印功能的实现比较简单(调用浏览器自身的打印控件)
document.getElementById("previewPdf").contentWindow.print();
更多推荐
已为社区贡献8条内容
所有评论(0)