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跨域问题
    在这里插入图片描述


//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打印文件,都会报错跨域
    –如果大家有可行的方法 请提供点参考意见。(太菜了不敢和运维沟通)
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值