美文网首页
Vue 3展示pdf问题

Vue 3展示pdf问题

作者: 代瑶 | 来源:发表于2022-01-02 13:24 被阅读0次

http://mozilla.github.io/pdf.js/getting_started/#download
https://mozilla.github.io/pdf.js/examples/
现在官网上将js下载放到本地,对viewer.js

image.png
<template>
  <div class="wrap">
    <iframe :src="pdfUrl"  width="100%" height="100%"></iframe>
  </div>
</template>

<script>
export default { 
  data() {
    return {
      pdfUrl: '',
    };
  },
  methods: {
    async loadPDF() { 
      # pdf路径,将文件放到public下的时候注意路径,否则会提示 xxx>.
      this.pdfUrl ='/pdf/web/viewer.html?file=https://ip地址/ksh5/file/test.pdf 
    },
  },

  mounted: function () {
    this.loadPDF();
  }

};
</script>

<style scoped>
.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
}
</style>

这样会存在一个跨域问题,所以需要在nginx上配置下

  location /ksh5/file {
      add_header Access-Control-Allow-Origin '*';
      proxy_pass http://localhost:8089/ksh5/;
    }


// if (origin !== viewerOrigin && protocol !== 'blob:') {
// throw new Error('file origin does not match viewer's');
// }

特么的碰到一个死坑的问题,耽搁了半天时间
官网上最新的2.12.313出现android端无法预览pdf的问题.

更换成 2.2.228就好了
pdfjs-2.2.228-dist.zip

相关文章

网友评论

      本文标题:Vue 3展示pdf问题

      本文链接:https://www.haomeiwen.com/subject/afuzqrtx.html