vue

2023-03-25 19:07| 来源: 网络整理| 查看: 265

先放个效果大图需求描述：这个word文档在后端存着，需要获取它的流，然后实现一个预览这个word的功能，然后下载、打印。预览的时候，本来要预览doc,但是查了一些up,都说doc显示的话文档格式有问题之类的bug,就决定转换成pdf,再预览了。。。

第一步获取数据流

点击预览的时候，获取文档流，这个地方一定要用axios的原生模式，就是说不能封装，一个up主说的，我也没弄明白，大概意思是：封装后会有一些拦截什么的，会出现白屏。

previewHandle() { let urlpath=`${process.env.VUE_APP_BASE_API}/templates/download/downLoadProtocolPdfFile?id=${this.uploadId}` axios({ method: "GET", headers: { Authorization: "Bearer " + getToken(), }, url: urlpath,//后端给的接口 responseType: "blob", // 更改responseType类型为 blob }) .then((res) => { const blob = new Blob([res.data], { type: "application/pdf" }); this.iframeUrls = window.URL.createObjectURL(blob); // window.open(window.URL.createObjectURL(blob1)); this.wordDialogVisible = true; }) .catch((err) => { console.log(err); }); }, 复制代码第二步显示 //'#toolbar=0' 这个加上之后，原生pdf上面的下载，打印分页都不会显示下载打印关闭复制代码第三步调起打印，获取iframe里面的内容

contentWindow.print,别人说有兼容性的问题，这个还没碰到

handleWindowPrint(id) { //这里的id是print,id样式名称, document.getElementById(id).contentWindow.print(); }, 复制代码

【本文地址】

vue

vue

今日新闻

推荐新闻