0
点赞
收藏
分享

微信扫一扫

Vue<打开PDF文件>

ITWYY 2021-09-24 阅读 74
vueVue

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

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

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

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

效果图:

代码如下:
<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>

如果出现这种问题


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

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

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

举报

相关推荐

0 条评论