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打印文件,都会报错跨域
    –如果大家有可行的方法 请提供点参考意见。(太菜了不敢和运维沟通)
在Spring Boot和Vue项目中实现PDF在线预览可以通过集成pdf.js库来实现。首先,您需要从官网下载pdf.js源码,并将其放入您的项目中。具体步骤如下: 1. 在官方网站下载pdf.js源码。 2. 将下载的源码放入您的Spring Boot项目中的某个目录中。 3. 打开viewer.html文件,您会注意到它会自动跳转到一个pdf文件。这个pdf文件是官方的示例文件。 4. 如果您只想打开一个特定的pdf文件,只需将官方示例文件替换为您自己的pdf文件。 5. 在viewer.js文件中搜索"defaultUrl",大约在第3500行左右。您可以找到类似上述代码的部分(注意:不同版本的pdf.js可能会略有差异)。 6. 只需更改"value"的值,即可实现预览您指定的pdf文件。 7. 如果您需要根据前端传递的不同值来响应不同的pdf文件,可以使用动态获取的方式来实现。 另外,如果希望使用浏览器自带的预览pdf功能,可以参考使用pdf.js的实现方式。但需要注意的是,某些浏览器可能不支持此功能,如360浏览器。您可以在我的博客中找到有关使用浏览器预览pdf的更多信息。 综上所述,您可以根据以上步骤在Spring Boot和Vue项目中实现PDF在线预览。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [springboot+vue整合pdf.js实现预览pdf](https://blog.csdn.net/qq_14853853/article/details/111176085)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值