码迷,mamicode.com
首页 > Web开发 > 详细

Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html

时间:2020-10-12 20:27:46      阅读:45      评论:0      收藏:0      [点我收藏+]

标签:apm   str1   date()   ons   nts   png   避免   lis   html   

pdf->build,web(viewer)应该放在static

技术图片

 

pdf组件

<template>
  <view class="content u-padding-0">
    <iframe
      width="100%"
      frameborder="0"
      scrolling="no"
      style="width: 100%; height: 100%; min-height: 450px"
      :src="pdfSrc"
    ></iframe>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  components: {},
  props: {
    src: {
      type: String,
    },
  },
  data() {
    return {
      dataList: [],
      htmlstr1: "",
      pdfSrc: "",
    };
  },
  methods: {
    loadPDF() {
      //pdfSrc :pdf存放的文件路径,可以是本地的,也可以是远程,这个是远程的,亲测可以用,用决对路径避免打包404
      //ie有缓存加个随机数解决 + ‘?r=‘ + new Date()
      // 508257834648080384

      let pSrc = this.src + "?r=" + new Date();
      this.pdfSrc =
        "./static/pdf/web/viewer.html?file=" + encodeURIComponent(pSrc) + ".pdf";
  console.log(this.pdfSrc,"this.pdfSrc")
  },
  },
  mounted: function () {
    this.loadPDF();
  },
};
</script>

<style lang="scss" scoped>
.order {
  /deep/.u-table {
    .u-tr,
    .u-td {
      height: 45px;
      line-height: 45px;
    }
  }
}
</style>

 

引用 

 

 
import mPDF from "./pdf.vue";
 

 <mPDF  v-if="pdfForm.authbook_url"  :src="pdfForm.authbook_url"></mPDF>

Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html

标签:apm   str1   date()   ons   nts   png   避免   lis   html   

原文地址:https://www.cnblogs.com/FACESCORE/p/13802476.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!