【vue】预览pdf的几种使用方法

预览pdf的几种方法

方法一：pdfjs，
去官网下载，把他放到static目录下，
cli2就是根目录下的static，cli3就是public下的static，放到public也是可以的，
他主要是接收一个路径进他的html里进行渲染
本地测试就把pdf也可以放在static下

image.png

<template>
  <div class="pdfjs">
    <iframe :src="pathUr" width="100%" height="100%" v-if="pathUr"></iframe>
  </div>
</template>

<script>
export default {
  data(){
    return {
      pathUr:'你的pdf本地路径或者远程url',
      //例如
      pathUr:'/static/test.pdf', // pathUr:'http://www.xxx.com/test.pdf'
    }  
  }
}
</script>

提示跨域的话，就去static/pdf/web/viewer.js的下面的代码注释掉

// if (fileOrigin !== viewerOrigin) {
          //   throw new Error('file origin does not match viewer\'s');
// }

缺点：文件太大了

方法二：

pdfjs-dist 依赖包
先安装

npm i -S pdfjs-dist

然后上代码，样式自己调，我调不好

<template>
  <div class="canvas_container">
      <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
    </div>
</template>

<script>
export default {
  data(){
    return {
      pdfDoc: null,
      pages: 0,
    }  
  },
methods: {
    _renderPage(num) {
      this.pdfDoc.getPage(num).then((page) => {
        let canvas = document.getElementById("the-canvas" + num);
        var vp = page.getViewport({ scale: 1 });
        let ctx = canvas.getContext("2d");
        let dpr = window.devicePixelRatio || 1;
        let bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1;
        let ratio = dpr / bsr;
        console.log(
          "vp, dpr, bsr,window.innerWidth",
          vp,
          dpr,
          bsr,
          window.innerWidth
        );

        let viewport = page.getViewport({
          scale: window.innerWidth / vp.width,
        });
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };
        page.render(renderContext);
        if (this.pages > num) {
          this._renderPage(num + 1);
        }
      });
    },
    _loadFile(url) {
      // this.$showLoading();
      PDFJS.getDocument(url).promise.then((pdf) => {
        // this.$closeLoading();
        this.pdfDoc = pdf;
        this.pages = this.pdfDoc.numPages;
        this.$nextTick(() => {
          this._renderPage(1);
        });
      });
    },
  },
  created() {
    console.log("this.pdfPath", this.pdfPath);
    this._loadFile(this.pdfPath);
  },
}
</script>
<style lang='scss' scoped>
.PdfJsDist {
  height: 100%;
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
  overflow: scroll;
}
.canvas_container {
  margin: 0 auto;
  border: 1px solid #333;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  canvas {
    width: 100%;
    height: 100%;
  }
}
</style>

方法三：

vue-pdf，与pdfjs-dist效果基本一毛一样，代码甚至还少点
上代码

<template>
  <div class="VuePdf">
    <pdf :src="pdfSrc" v-for="i in numPages" :key="i" :page="i"></pdf>
  </div>
</template>

<script>
export default {
  data(){
    return {
      pdfSrc: "",
      numPages: 1, //  pdf 文件总页数
    }  
  },
mounted() {
    // let url = "/static/test.pdf"; 
    this.getNumPages(url);
  },
methods: {
    getNumPages(url) {
      //
      var loadingTask = pdf.createLoadingTask(url);
      loadingTask.promise
        .then((pdf) => {
          this.pdfSrc = loadingTask;
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf加载失败");
        });
    },
  },
}
</script>

方法四：

直接打开，全交给浏览器

window.open('/static/test.pdf或者远程url')

最后，想要个赞！