第一种是用： <iframe> 嵌套显示

先上效果图：

注：这种还带样式的是我后面修改源码的 js添加的： customToolbar.js

//创建一个新样式
let sheet = (function() {let style = document.createElement("style");style.appendChild(document.createTextNode(""));document.head.appendChild(style);return style.sheet;
})();//调整页面大小时，PDF 预览组件会隐藏，打开就会彻底隐藏所有功能变成一个纯预览工具。
function editToolBar(){removeGrowRules();//将功能按钮放在工具栏左侧addElemFromSecondaryToPrimary('pageRotateCcw', 'toolbarViewerLeft')addElemFromSecondaryToPrimary('pageRotateCw', 'toolbarViewerLeft')addElemFromSecondaryToPrimary('zoomIn', 'toolbarViewerLeft')addElemFromSecondaryToPrimary('zoomOut', 'toolbarViewerLeft')//将功能按钮放在工具栏中间addElemFromSecondaryToPrimary('previous', 'toolbarViewerMiddle')addElemFromSecondaryToPrimary('pageNumber', 'toolbarViewerMiddle')addElemFromSecondaryToPrimary('numPages', 'toolbarViewerMiddle')addElemFromSecondaryToPrimary('next', 'toolbarViewerMiddle')//将功能按钮放在工具栏右侧addElemFromSecondaryToPrimary('secondaryOpenFile', 'toolbarViewerRight')// 更改功能按钮的图标changeIcon('previous', 'icons/baseline-navigate_before-24px.svg')changeIcon('next', 'icons/baseline-navigate_next-24px.svg')changeIcon('pageRotateCcw', 'icons/baseline-rotate_left-24px.svg')changeIcon('pageRotateCw', 'icons/baseline-rotate_right-24px.svg')changeIcon('viewFind', 'icons/baseline-search-24px.svg');changeIcon('zoomOut', 'icons/baseline-zoom_out-24px.svg')changeIcon('zoomIn', 'icons/baseline-zoom_in-24px.svg')changeIcon('sidebarToggle', 'icons/baseline-toc-24px.svg')changeIcon('secondaryOpenFile', './icons/baseline-open_in_browser-24px.svg')// 隐藏某些功能removeElement('secondaryToolbarToggle')removeElement('scaleSelectContainer')removeElement('presentationMode')removeElement('openFile')removeElement('print')removeElement('download')removeElement('viewBookmark')
}function changeIcon(elemID, iconUrl){let element = document.getElementById(elemID);let classNames = element.className;classNames = elemID.includes('Toggle')? 'toolbarButton#'+ elemID :classNames.split(' ').join('.');classNames = elemID.includes('view')? '#'+ elemID +'.toolbarButton' : '.'+ classNamesclassNames+= "::before";addCSSRule(sheet, classNames, `content: url(${iconUrl}) !important`, 0)
}function addElemFromSecondaryToPrimary(elemID, parentID){let element = document.getElementById(elemID);let parent = document.getElementById(parentID);element.style.minWidth = "0px";element.innerHTML =''parent.append(element);
}function removeElement(elemID){let element = document.getElementById(elemID);element.parentNode.removeChild(element);
}function removeGrowRules(){addCSSRule(sheet, '.hiddenSmallView *', 'display:block !important');addCSSRule(sheet, '.hiddenMediumView', 'display:block !important');addCSSRule(sheet, '.hiddenLargeView', 'display:block !important');addCSSRule(sheet, '.visibleSmallView', 'display:block !important');addCSSRule(sheet, '.visibleMediumView', 'display:block !important');addCSSRule(sheet, '.visibleLargeView', 'display:block !important');
}function addCSSRule(sheet, selector, rules, index) {if ("insertRule" in sheet) {sheet.insertRule(selector + "{" + rules + "}", index);} else if("addRule" in sheet) {sheet.addRule(selector, rules, index);}
}window.onload = editToolBar

html代码如下：

<iframe :src="iframeUrl" style="width: 100%; height: 500px;overflow-y: auto;overflow-x: auto;"></iframe>

js 代码：

data(){return {iframeUrl: '' ,}
}methods：{preview(){}
}

这里需要你去下载pdf,js 文件：

官网(https://mozilla.github.io/pdf.js/getting_started/#download)下载PDFJS，

注意放在static文件目录下，如果vue最新版本放在public文件中（本项目@vue/cli 4.4.6）

嫌麻烦的请去传送门下载：https://download.csdn.net/download/qq_41646249/85200156?spm=1001.2014.3001.5501

记住：在axios请求中设置响应类型,此方法是自己项目中封装的axios请求，可根据自己情况加这行代码

responseType: 'blob',

在预览的方法里面： preview（）

  this.$axios({url: "/api/c3/report/toAutoPdfFiles", method: 'post',responseType: 'blob',data: formData,headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{console.log("res：", res)// res.data  是后端返回的 pdf 文件流let urlPdf  = window.URL.createObjectURL(new Blob([res.data]))console.log('urlPdf:', urlPdf)  //blob:http://localhost:8080/e8451cb8-3238-4272-b490-0420df4a5b88this.iframeUrl = '/pdf/web/viewer.html?file=' + encodeURIComponent(urlPdf)})

注：后台返回的文件流：res.data

第二种是用 window.open(fileURL) 打开新的窗口显示

方法如下：

 this.$axios({url: "/api/c3/report/toAutoPdfFiles", method: 'post',responseType: 'blob',data: formData,headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{console.log("window.open", res)let blob = new Blob([res.data], {type: 'application/pdf' });let fileURL = URL.createObjectURL(blob);window.open(fileURL);    //这里是直接打开新窗口})

效果如下：

第三种方法是用 vue-pdf

下载vue-pdf包

npm i vue-pdf -save

局部引入使用：

 <el-dialog title="PDF 预览" :visible.sync="viewVisible" width="70%" center><template><pdf :src="pdfUrl"></pdf></template></el-dialog>
<script>
import pdf from 'vue-pdf'
export default {components: {pdf},data:{return {pdfUrl : ""}}create(){let path = 'http://image.cache.timepack.cn/nodejs.pdf' //后台返回pdf文件路径this.pdfUrl = pdf.createLoadingTask(path)}
}
</script>

( 推荐使用iframe方法 )或者 window.open(url)

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：正在跳转

vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式相关推荐

php104.tmp,ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
这是修改之前的代码 if(!empty($_FILES)){ if(!empty($_FILES[org_positive])){ $org_positive = request()->file ...
文件上传——选择文件之后自动上传||文件上传的后端代码
选择文件之后自动上传 //普通图片上传var uploadInst = upload.render({elem: '#test1', url: 'file/upload.action', accept ...
WEB漏洞-文件上传之后端黑白名单绕过
WEB漏洞-文件上传之后端黑白名单绕过文件上传常见验证:后缀名,类型,文件头后缀名:黑名单,白名单黑名单:asp php jsp aspx cgi war- 白名单: txt jpg zip r ...
第21天-WEB漏洞-文件上传之后端黑白名单绕过
思维导图文件上传常见验证后缀名,类型,文件头等黑名单:明确不允许上传的格式后缀如:$deny_ext = array('.asp','.aspx','.php','.jsp'); 不允许上传后 ...
php上传文件自动删除,jsp-解决文件上传后重启Tomcat时文件自动删除问题
吼吼,我遇到的问题是这样的...... 我写了一个图片上传的方法,上传时,判断没有这个目录就自动建立一个.然后开始上传图片,能成功,能在服务器找到文件夹和相应的文件.但是,重启项目,或者清理缓存之后, ...
华为服务器上传文件后怎么通过链接查看,远程服务器文件上传后的操作
远程服务器文件上传后的操作内容精选换一换本节指导您基于Linux操作系统环境完成镜像文件快速导入,推荐使用云平台的EulerOS云服务器作为转换镜像格式和生成位表文件的环境.Linux操作系统环 ...
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪前置条件安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...
2020小迪培训（第21天 WEB 漏洞-文件上传之后端黑白名单绕过）
WEB 漏洞-文件上传之后端黑白名单绕过前言文件上传常见验证后缀名,类型,文件头等后缀名:黑名单,白名单黑名单:明确不允许上传的格式后缀 asp php jsp cgi war- 缺陷:在定 ...
vue2 + elementui el-upload文件上传后回显及重新提交思路
回显: :file-list="fileList" 可用于预览图片列表,数组内的对象格式为{name: '', url:"'}. 文件上传后,需让后端返回文件标识和服务器 ...

vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式

第一种是用： <iframe> 嵌套显示

第二种是用 window.open(fileURL) 打开新的窗口显示

第三种方法是用 vue-pdf

vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式相关推荐

最新文章

热门文章