原文链接:https://www.cnblogs.com/the-big-dipper/p/16880180.html
1、html项目
方法:<a href="../../pdf/web/viewer.html?file=../../pdf/1.pdf" target="_blank">文件</a>
最重要的是href的地址。
href地址的组成:pdfjs的viewer.html 地址 + ?file= + pdf文件地址
pdfjs的viewer.html 地址:相对于<a>标签所在文件的地址
pdf文件地址:1、公开链接的地址,2、pdf文件相对于(pdfjs的viewer.html 地址)的地址。
注意点: (1)将pdfjs文件夹放在public文件夹下,这样编译后可以直接在项目的同层访问pdfjs文件夹。(public文件夹不会被打包) (2)public文件夹下的访问路径是整个文件夹的一级目录。比如整个项目部署后,访问路径是https://vip.qiuer.cc/vip/secondary-system/,则pdf文件夹的访问路径是:https://vip.qiuer.cc/vip/secondary-system/pdf/ (3) 需要新建个vue文件用于pdf查看,用iframe,下面贴了代码。点击查看的时候,跳转路由到pdf查看页。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<template>
<div>
<iframe :src= "src" style= "width: 100%; height: 100vh" ></iframe>
</div>
</template>
<script>
export default {
name: "PdfView" ,
data() {
return {
src: "" ,
};
},
computed: {
data: function () {
return this .$store.state.infoRequestData.data;
},
},
mounted() {
this .getUrl();
},
methods: {
getUrl: function () {
let base = window.location.origin + window.location.pathname;
this .src = `${base}/pdf/web/viewer.html?file=${
window.location.origin
}/vip/${
this .data.Form?.attachment[ this .data.Form?.attachment?.length - 1]
?.previewUrl
}`;
},
},
};
</script>
<style scoped>
</style>
|