2021-10-19-PDFJS使用基础教程

最新推荐文章于 2024-09-05 10:37:19 发布

sunrise_A

最新推荐文章于 2024-09-05 10:37:19 发布

阅读量1k

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/sunrise_A/article/details/120840970

版权

本文介绍了如何使用PDF.js库在原生JavaScript和Vue环境中实现PDF预览功能。包括加载Base64编码的PDF，设置缩放和关闭功能。提供了详细代码示例，涉及PDF.js的配置、canvas渲染及Vue组件交互。

摘要由CSDN通过智能技术生成

@pdfjs基础使用教程，可直接运行。

PDFJS基础使用，pdfJS版本pdfjs-dist2.2.228,

下载方式 npm install pdfjs-dist@2.2.228
pdf是用base64转码的写死的。后期项目中可以更改为发ajax接口时在赋值pdfData。注意别忘了调用atob（）方法。
页面展示效果
在这里插入图片描述点击预览pdf，打开pdf，有放大缩小和关闭pdf功能。

在这里插入图片描述

1.原生js方法。注意引入正确的pdfjs路径。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>'Hello, world!' base64 example</title>
    <style type="text/css">
        #the-canvas {
            border:1px solid black;
        }
    </style>
</head>
<body>
<!-- 自己的路径 -->
<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<h1>PDF.js 'Hello, base64!' example</h1>
<canvas id="the-canvas"></canvas>
</body>
<script type="text/javascript">
    //直接使用官网例子中的文档吧
    //atob(  后台返回的把文档进行base64编码之后的String  )
    var pdfData = atob(
    'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
    'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
    'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
    'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
    'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
    'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
    'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
    'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
    'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
    'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
    'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
    'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
    'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
    var CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/';//自己的pdfjs字库的路径
    pdfjsLib.GlobalWorkerOptions.workerSrc ="../../node_modules/pdfjs-dist/build/pdf.worker.js"//自己的路径
    var loadingTask = pdfjsLib.getDocument({
        data: pdfData,
        cMapUrl: CMAP_URL,
        cMapPacked: true,
    });
    loadingTask.promise.then(function(pdf) {
        pdf.getPage(1).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport(scale);
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
                canvasContext: context,
                viewport: viewport,
            };
            page.render(renderContext);
        });
    });
</script>
</html>

2.vue方法，将该vue单页面加入vue项目中，配置router，项目运行就可以看到了。

<template>
    <div>
     <button @click.prevent="query">预览pdf</button>
     <div class="preview_modal" v-show="showPreview"></div>
     <div v-show="showPreview" class="btns">
         <button @click="big()">放大</button>
         <button  @click="small()">缩小</button>
         <button  @click="close()">关闭</button>
     </div>
    </div>
</template>
<script>
import pdfJS from '../../node_modules/pdfjs-dist/build/pdf'
export default {
  data () {
    return {
      pdfData: atob('JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
    'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
    'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
    'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
    'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
    'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
    'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
    'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
    'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
    'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
    'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
    'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
    'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'),
      scale: 1,
      maxScale: 2,
      minScale: 0.6,
      showPreview: false
    }
  },
  methods: {
    query () {
    //   this.pdfData = atob(this.pdfData)
      this.showPreview = true
      this.previewPDF()
    },
    previewPDF () {
      // 引入pdf.js的字体
      let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
      // 读取base64的pdf流文件
      let loadingTask = pdfJS.getDocument({
        data: this.pdfData, // PDF base64编码
        cMapUrl: CMAP_URL,
        cMapPacked: true
      })
      //   console.log(loadingTask)
      loadingTask.promise.then((pdf) => {
        console.log(pdf)
        this.loadFinished = true
        let numPages = pdf.numPages
        let pageNumber = 1
        this.getPage(pdf, pageNumber, numPages)
      })
    },
    getPage (pdf, pageNumber, numPages) {
      pdf.getPage(pageNumber).then((page) => {
        // 获取DOM中为预览PDF准备好的canvasDOM对象
        let canvas = document.createElement('canvas')
        document.getElementsByClassName('preview_modal')[0].appendChild(canvas)
        let viewport = page.getViewport(this.scale)
        canvas.height = viewport.height
        canvas.width = viewport.width

        let ctx = canvas.getContext('2d')
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport
        }
        page.render(renderContext).then(() => {
          pageNumber += 1
          if (pageNumber <= numPages) {
            this.getPage(pdf, pageNumber, numPages)
          }
        })
      })
    },
    big () {
      if (this.scale < this.maxScale) {
        this.scale += 0.2
        document.getElementsByClassName('preview_modal')[0].innerHTML = ''
        this.previewPDF()
      }
    },
    small () {
      if (this.scale > this.minScale) {
        this.scale -= 0.2
        document.getElementsByClassName('preview_modal')[0].innerHTML = ''
        this.previewPDF()
      }
    },
    close () {
      this.showPreview = false
      this.scale = 1
      document.getElementsByClassName('preview_modal')[0].innerHTML = ''
    }
  }

}

</script>
<style scoped>
.preview_modal{
    position: fixed;
    width: 100%;
    height: 100%;
    left:0;
    top:55px;
    background-color: rgba(0,0,0,0.5);
    overflow:scroll;
}
.btns{
    position: fixed;
    top:1%;
    width: 200px;
    left: 50%;
    transform:translateX(-50%)
}
</style>