前端实现pdf文件预览

1.后端返回的是pdf链接

//可以直接使用iframe进行显示
<template><div>//iframe<iframe:src="url"type="application/x-google-chrome-pdf"width="100%"height="100%" />//此标签h5特性中包含四个属性：高、宽、类型、预览文件src！//与< iframe > < / iframe > 不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到！<embed :src="url" type="application/pdf" width="100%" height="100%">//object标签和iframe使用差别较小<object :src="url" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a></object></div>
</template>export default {    data() {return {url: ``,};
}      mounted() {this.url=`http://192.168.1.110:5000/assets/doc/xx调度方案7.pdf`;}

2.后端返回文件流数据

<template><div><iframeframeborder="0"scrolling="auto":src="imageUrl"type="application/x-google-chrome-pdf"width="100%"height="622px"/></div>
</template>
export default {data(){return {imageUrl:''}},methods:{//调用此方法，data传入参数，改变responseType，返回buffer文件流//注意：iframe一定要设置高度  ， 此方法不兼容iegetPdf(data, {responseType: 'arraybuffer'}).then(res => {var reg = /^['|"](.*)['|"]$/;const data = res.data;const tempName = res.headers['content-disposition'].split('filename=')[1].replace(reg, '$1');/* 兼容ie内核，360浏览器的兼容模式 */if (window.navigator && window.navigator.msSaveOrOpenBlob) {const blob = new Blob([data], {type: 'application/pdf;charset=utf-8'});window.navigator.msSaveOrOpenBlob(blob, tempName);} else {/* 火狐谷歌的文件下载方式 */var blob = new Blob([data], {type: 'application/pdf;charset=utf-8'});var href = window.URL.createObjectURL(blob);this.imageUrl = href;}});}//创建文件流对象// let blob = new Blob([response], { type: "application/zip" });// //判断后端传递过来的流是否为不为空// if (blob.size !== 0) {//   //获取heads中的filename文件名，这种方式在跨域的情况下获取不到默认响应头外的信息。//   // let fileName = decodeURI(//   //   response.headers["content-disposition"]//   //     .split(";")[1]//   //     .split("filename=")[1]//   // );//   let url = window.URL.createObjectURL(blob); // 创建新的URL表示指定的blob对象//   //创建a标签元素节点//   let a = document.createElement("a");//   a.style.display = "none";//   a.href = url; // 指定下载链接//   a.download = props.data.displayName; // 指定下载文件名//   a.click();//   URL.revokeObjectURL(a.href); // 释放URL对象//   /*这样下载文件名为乱码所以不再采用 window.location.href = url*/// } else {//   proxy.$message.warning("当前暂无下载的文档！");// }
}

3.pdf.js

//1.下载请前往官网下载，具体链接：PDFjs预览插件官方下载地址，要下载stable版本，下载后是zip压缩包，要用解压工具给解压一下
//2.将下载构建后的插件放到文件中的public中
<template><div><iframeframeborder="0"scrolling="auto":src="url"type="application/x-google-chrome-pdf"width="100%"height="622px"/></div>
</template>
export default {data(){return {url:''}},methods:{loadPdf(){let loadUrl = 'https://xxxx.pdf'this.url = `${window.location.protocol}//${window.location.host}/pdfjs/web/viewer.html?file=${encodeURLComponent(loadUrl)}`}}
}

https://blog.csdn.net/qq_35770417/article/details/109904407 pdfjs使用参考

其他文件（word，xls，ppt的在线预览功能）https://segmentfault.com/a/1190000018806682

前端实现pdf文件预览相关推荐

pdf文件预览、打印
前端 pdf 文件预览的方式有多种. html元素:<iframe>.<embed> <iframe :src="pdfUrl " style=&qu ...
Java使用openOffice转PDF以及PDF文件预览乱码问题
Java使用openOffice转PDF以及PDF文件预览乱码问题使用openOffice,支持doc, docx, .xls, .xlsx, .ppt, .pptx转pdf 一:依赖 <de ...
java pdf文件下载_Java后台返回PDF文件预览下载
Java后台返回PDF文件预览下载开始的代码的系统代码为: ResponseEntity onePdf = s3Wrapper.download(contractEntity.getContract ...
用vue-pdf包实现pdf文件预览，支持分页
vue项目实现pdf文件预览功能下载vue-pdf包 npm install --save vue-pdf template模板内容: //pdf组件 <pdf :src="pdfF ...
前端实现pdf在线预览
概述:pdf在线预览,包括PC端浏览器.IOS.Android,开发过程中遇到的问题及解决方案 [1]iframe 直接打开pdf文件(可用于PC端) <iframe src="pdf ...
Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
手机端pdf文件预览pdf.js使用方法详解
虽然H5页面可以通过A直接访问html 但可惜的是手机端H5页面这样做就直接变下载了那么想要实现手机端的pdf文件预览就需要用到pdf.js了首先我们访问地址 http://mozilla.g ...
mpvue PDF文件预览
小程序中PDF文件预览问题在小程序中可以ios端可以使用 <web-view :src="url"></web-view> 但是在Android端pdf ...
Nginx配置文件目录实现pdf文件预览及下载
默认情况下,通过nginx服务器来访问pdf文件,在浏览器上是会直接打开该pdf文件呈现内容的.如果想要访问pdf文件时,实现下载文件的效果,则需要在nginx服务端做一些配置. 以下配置只能下载 n ...

前端实现pdf文件预览

1.后端返回的是pdf链接

2.后端返回文件流数据

3.pdf.js

前端实现pdf文件预览相关推荐

最新文章

热门文章