网站首页弹出公告模板,wordpress主题 cms,平板电视seo优化关键词,网站建设常态化工作机制情况一
如果后端返回的pdf地址#xff0c;粘贴到浏览器的url框中#xff0c;可以在浏览器中直接进行预览的#xff0c;那么我们就用window.open#xff0c;或 a标签#xff0c;或iframe标签通过设置src进行预览即可
法1#xff1a;可以直接使用window.open#xff08;…情况一
如果后端返回的pdf地址粘贴到浏览器的url框中可以在浏览器中直接进行预览的那么我们就用window.open或 a标签或iframe标签通过设置src进行预览即可
法1可以直接使用window.open获取到的pdf地址重新打开一个浏览器页签
通过浏览器页签直接实现预览功能预览页面的样式根据浏览器的不同会略有差异
法2使用iframe标签
iframe :src获取到的pdf预览地址/iframe
法3使用a标签也可设置跳转一个新窗口
a :href获取到的pdf预览地址/a
情况二
后端返回了服务器文件pdf的地址粘贴到浏览器的url框中无法在浏览器中直接进行预览或者是直接进行了下载这种情况上述方法解决不了需要使用插件或者设置浏览器请求头的方式来解决
法1使用vue-pdf进行预览
1安装
npm install --save vue-pdf
2引入在要使用的vue页面进行引入
import pdf from vue-pdf 并引入组件 components: { pdf }
3使用 单页pdf可以直接使用
pdf:src获取到的pdf地址
/pdf 多页pdf通过循环实现
pdfv-foritem in pageTotal:srcpdfUrl:keyitem:pageitem/pdf
data中定义 data(){return{pageTotal: null,pdfUrl: http://101.34.220.192:9000/emergency-response/integration/system_manual/RESOURCE1689663612812.pdf}
} // 获取pdf总页数getTotal() {// 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据// 需要使用下述方法的返回值作为urlthis.pdfUrl pdf.createLoadingTask(this.pdfUrl)// 获取页码this.pdfUrl.promise.then(pdf this.pageTotal pdf.numPages).catch(error { })},
此时就可以正常预览 法2不使用插件使用get请求修改请求头类型来实现
定义一个函数 openPdf(url) {return new Promise((resolve, reject) {let blob null;let xhr new XMLHttpRequest();xhr.open(GET, http://101.34.220.192:9000/emergency-response/integration/system_manual/RESOURCE1689663612812.pdf);xhr.responseType blob;xhr.onload () {blob xhr.response;const blobob new Blob([blob], { type: application/pdf;charsetutf-8 });const href window.URL.createObjectURL(blobob);window.open(href, newWindow);resolve(file);};xhr.onerror (e) {reject(e)};xhr.send();});},
使用 a href clickopenPdf(http://101.34.220.192:9000/emergency-response/integration/system_manual/RESOURCE1689663612812.pdf) target_blank预览文档/a
