vue-pdf 单列显示多个pdf页面

落魄小二2023-07-31 18:26

javascript 复制代码

<template>
  <div>
    <pdf
      v-for="i in numPages"
      :key="i"
      :src="src"
      :page="i"
      style="display: inline-block; width: 100%"
    ></pdf>
<!-- 宽度设置100% 一行只展示一页 -->
  </div>
</template>
<script>
import pdf from "vue-pdf";
var loadingTask = pdf.createLoadingTask(
  "/static/clause.pdf"
);
export default {
  data() {
    return { src: loadingTask, numPages: undefined };
  },
  components: {
    pdf,
  },
  mounted() {
    this.src.promise.then((pdf) => {
      this.numPages = pdf.numPages;
    });
  },
};
</script><template>
  <div>
    <pdf
      v-for="i in numPages"
      :key="i"
      :src="src"
      :page="i"
      style="display: inline-block; width: 100%"
    ></pdf>
  </div>
</template>
<script>
import pdf from "vue-pdf";
var loadingTask = pdf.createLoadingTask(
  "/static/clause.pdf"
);
export default {
  data() {
    return { src: loadingTask, numPages: undefined };
  },
  components: {
    pdf,
  },
  mounted() {
    this.src.promise.then((pdf) => {
      this.numPages = pdf.numPages;
    });
  },
};
</script>

注意：文件要放在public文件夹下，不然会报错：如果文件放在远程服务器上，则直接写远程地址

Warning: Ignoring invalid character "33" in hex string'

原因：读取 PDF 文件时，路径不合法，导致读取不到文件；在 vue-cli3 脚手架搭建的项目中，读取本地的 PDF 文件需要放到 public 文件夹中，在引用时，不能使用相对路径，且'/'即表示 public 文件夹 (需略去 public)；