Vue Cli项目使用PDF.js预览pdf无法访问到viewer.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>