前端vue实现PDF预览

一、使用a标签

<a href="http://xxx.xx.cn/test1.pdf" target="_blank" rel="external nofollow" >pdf</a>
           

注意，href地址必须是文件的绝对位置，相对位置不可以。也就是说url写为"…/assets/pdf/test1.pdf"，这样访问不到PDF文件。

点击链接在新窗口打开预览PDF文件，和使用浏览器输入文件地址打开文件一样。

二、使用iframe标签

<div class="iframe-pdf">
		<iframe src="http://xxx.xx.cn/test1.pdf"></iframe>
		<iframe src="http://xxx.xx.cn/test2.pdf"></iframe>
</div>
           

这种会直接在页面展现出PDF文件

三、使用pdfjs-dist插件

<template>
  <div>
    <div id="the-canvas"></div>
  </div>
</template>

<script>
import PDFJS from "pdfjs-dist";
import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
PDFJS.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js";

export default {
  data(){
      return{
      }
  },
  mounted() {
    this.getPDF();
    console.log(this.pdfDoc)
  },
  methods:{
    //通过URL请求PDF
    async getPDF(url) {
      const myHeader = {
        method: "GET",
        Accept: "application/json",
        "if-None-Match": 1,
        pragma: "no-cache",
        "cache-control": " no-cache"
      };
      console.log(url)
      const src = {
        // url: url,
        url: '/flie/test1.pdf',
        httpHeaders: myHeader,
        withCredentials: true,
        cMapUrl: "https://cdn.jsdelivr.net/npm/[email protected]/cmaps/",
        cMapPacked: true,
      }
      var loadingTask = PDFJS.getDocument(src);
      loadingTask.promise.then(pdf => {
        const pdfDoc = pdf;
        this.pdfDoc = pdfDoc;
        console.log(this.pdfDoc);
        this.render(1);
        this.renderAll();
      }).catch(err => err);
    },

    //渲染某一页PDF
    render(pageNum){
      this.pdfDoc.getPage(pageNum).then(function(page) {
        const canvas = document.createElement(`canvas`);
        const context = canvas.getContext("2d");
        document.getElementById('the-canvas').appendChild(canvas);
        var scale = 1.5;
        var viewport = page.getViewport({ scale: scale, });
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
        const pageDom = document.createElement('div');
        pageDom.className = `${pageNum}`;
        pageDom.append(canvas)
        document.getElementById('the-canvas').append(pageDom);
      });
    },
    
    //渲染所有PDF
    renderAll(){
      const allPages = this.pdfDoc.numPages;
      console.log(allPages);
      for(let i = 0;i < allPages;i++){
          this.render(i);
      }
    },
  },
}
</script>

<style>

</style>