vue-cli@3.0 axios将pdf二进制文件流转换成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();

 

  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值