前端实现pdf文件预览

1.后端返回的是pdf链接

//可以直接使用iframe进行显示
<template>
	<div>
		<iframe
	    :src="url"
	    type="application/x-google-chrome-pdf"
	    width="100%"
	    height="100%" />
	</div>
</template>
    
export default {    
    data() {
        return {
            url: ``,
        };
}      

mounted() {
        this.url=`http://192.168.1.110:5000/assets/doc/xx调度方案7.pdf`;
    }

//后端返回文件流数据
<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;
                }
              });
	}
}