zoukankan      html  css  js  c++  java
  • 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=" 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>
  • 相关阅读:
    二、一切都是对象
    一、对象导论
    CSS 属性大全
    CSS颜色代码大全
    CSS Position 定位属性
    CSS Box Model 盒子模型
    ThreadLocal
    Java 模拟死锁
    byte 最小值为啥是最小是 -128 ;int最小值为啥是 -2147483648
    cmd 查看端口号占用情况
  • 原文地址:https://www.cnblogs.com/FACESCORE/p/13802476.html
Copyright © 2011-2022 走看看