Vue<打开PDF文件>

在网页上打开一个pdf文件最简单的方法就是另外打开一个页面

//url 为pdf路径
 window.open(url, "_blank");

此篇文章是使用pdf插件打开pdf，下图是需要放到 static 静态文件夹里的内容~~

🛒 点击此处 下载 pdf 相关文件

image.png

效果图：

image.png

代码如下：

<template>
  <div class="overall">
      <iframe id="previewPdf" :src="'/static/pdf/web/viewer.html?file=' + url"></iframe>
  </div>
</template>

<script>
export default {
data(){
    return{
        url:'https://en.oollee.com/pres.pdf'
    }
}
}
</script>

<style lang="scss" scoped>
#previewPdf{
    width: 500px;
    height: 800px;
}
</style>

如果出现这种问题

image.png

原因有两种：
1.不能在本地对 pdf 进行打开，比如从地址 http://localhost 打开就不可以；
2.你所请求的 pdf 文件的路径未设置跨域

解决办法
1.我一般是写好后直接打包好放到相对应的域名桶里面，直接通过带有域名的地址请求就可以了
2.设置存放 pdf 对应域名地址配置

此处只是简单介绍一下我用到的 pdf插件，有好的推荐，欢迎下方评论留言~~ 😘