-
背景:请求接口后端返回的是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打印文件,都会报错跨域
–如果大家有可行的方法 请提供点参考意见。(太菜了不敢和运维沟通)