2021/05/31 vue-pdf显示阿里云外链文件

• 背景：请求接口后端返回的是url链接，这个链接双击打开是PDF文件，
  –原本用的iframe可以将文件显示到页面上，但iframe预览框不好设置样式。使用embed标签显示文档不能去掉黑边，所以用vue-pdf插件来显示PDF文件
  –后端返回的接口数据类似如下
  

• 问题
  –由于文件是后端存放在阿里云OSS上的，使用vue-pdf插件直接使用会报错跨域
  –在控制台网络那里，这样发现问题的
  –用了vue-pdf插件后，网络那里会有请求PDF文件，这里原本的样子是这样
  
  –网上看了很多信息，说可能需要后端配置允许跨域这种设置
  
  咨询后端说这个是阿里OSS的域名，他不能设置，然后我这个是找的运维解决的
  –运维解决后，再看刚才那个文件请求，就会有允许跨域的设置了
  
  –参考的阿里云OSS配置链接
  阿里云OSS请求跨域问题的配置解决方案
  OSS阿里云上传文件 前端js下载url跨域问题
  

---

• vue-pdf显示多页PDF文件，翻页显示
  例子参考链接Vue PDF文件预览vue-pdf
  代码

//1.template
<pdf
        :src="pdfUrl"
        :page="currentPage"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
      >
</pdf>
//2.js
<script>
import pdf from "vue-pdf"; //引入vue-pdf  显示服务器pdf文件

export default {
	components: {
    	pdf,
  	},
  	data() {
    return {
	      currentPage: 0, // pdf文件页码
	      pageCount: 0, // pdf文件总页数
	      fileType: "pdf", // 文件类型
	      pdfUrl: "", //pdf文件地址
	    };
	 },
	 methods:{
		// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
	    changePdfPage(val) {
	      console.log(val);
	      if (val === 0 && this.currentPage > 1) {
	        this.currentPage--;
	        // console.log(this.currentPage)
	      }
	      if (val === 1 && this.currentPage < this.pageCount) {
	        this.currentPage++;
	        // console.log(this.currentPage)
	      }
	    },

		// pdf加载时
	    loadPdfHandler(e) {
	      this.currentPage = 1; // 加载的时候先加载第一页
	    },
	}
  	
}
</script>

–还要一页显示多页文件的，还没尝试 链接先放这儿
vue-pdf实现PDF按页预览

• 待解决
  – PDF文件通过vue-pdf插件显示到页面上后，怎么自定义写打印功能和下载功能呢
  –我尝试了iframe.contentWindow.print()和printJS打印文件，都会报错跨域
  –如果大家有可行的方法 请提供点参考意见。（太菜了不敢和运维沟通）