前端实现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>
		<iframe
            frameborder="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一定要设置高度  ， 此方法不兼容ie 
		getPdf(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>
		<iframe
            frameborder="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