vue 项目展示 pdf 文件

当时是直接把文件放到了页面的文件夹下面，引用的时候地址直接是./01.pdf

此时没有报错，检查选中是有占位的，但是没有显示文档出来

我查了很久，一直也查不到解决方法

后来试了试线上的pdf文件，发现可以展示

然后看到官网和查到的资料，都是放到 public 或者 static 下面

我就把文件放在了 static 下面试试，发现可以

总结下来就是要么是线上的文件，要么文件就放到 public 或者 static 下面

下面是代码

			  <div>
                <el-button-group>
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    size="mini"
                    @click="prePage"
                  >上一页</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                  >{{ pageNum }} / {{ pageTotalNum }}</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="nextPage"
                  >下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>

                <pdf
                  :page="pageNum"
                  :src="url"
                  @progress="loadedRatio = $event"
                  @num-pages="pageTotalNum=$event"
                ></pdf>
              </div>

import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      // 页面
      pageNum: 1,
      // 总页面 
      pageTotalNum: 1,
      loadedRatio: 0,
      url:"http://image.cache.timepack.cn/nodejs.pdf", // pdf文件地址
    };
  },

    // 上一页
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },
    // 下一页
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },