浏览器端、H5移动端加载预览pdf文件（Pdf.js的使用）

2024-04-22 本文已影响0人东方三篇

web、H5、vue等预览pdf文件（Pdf.js）

Pdf.js官方文档：文档地址

1. 使用场景

在浏览器中展示PDF文件内容：使用Html5的canvas元素来展示pdf文件。
支持基本的浏览功能：PDF.js提供了一套用户界面，包括缩放、滚动、翻页等浏览功能，使用户能够方便地导航和浏览PDF文件。

2. 使用方法

web浏览器中使用

引入pdf.js文件.需要使用pdf.js文件和pdf.worker.js文件。

// 引入 pdf.js 文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.js"></script>

编码示例（2.x版本示例）

<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Example</title>
  <style> #pdf-container { width: 800px; height: 600px; overflow: scroll; } </style>
</head>
<body>
  <div id="pdf-container"></div>
  <button id="prev-btn">Previous</button>
  <button id="next-btn">Next</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.js"></script>
  <script>
    // 指定工作线程脚本的路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.js'
    var container = document.getElementById('pdf-container')
    // 放入pdf文件链接地址
    pdfjsLib.getDocument('https://oss.xxxxxxxxxxxxx.pdf').promise.then(function (pdf) {
      var currentPage = 1
      function renderPage(pageNumber) {
        container.innerHTML = '' // 清空容器
        pdf.getPage(pageNumber).then(function (page) {
          var scale = 1.2
          var viewport = page.getViewport({ scale: scale })
          var canvas = document.createElement('canvas')
          var context = canvas.getContext('2d')
          canvas.width = viewport.width
          canvas.height = viewport.height
          page.render({
            canvasContext: context,
            viewport: viewport
          })
          container.appendChild(canvas)
          currentPage = pageNumber
        })
      }
      // 监听翻页按钮点击事件
      document.getElementById('prev-btn').addEventListener('click', function () {
        if (currentPage > 1) { renderPage(currentPage - 1) }
      })
      document.getElementById('next-btn').addEventListener('click', function () {
        if (currentPage < pdf.numPages) { renderPage(currentPage + 1) }
      })
      renderPage(1)
    })
  </script>
</body>
</html>

最新版本（4.x）示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>pdf example</title>
</head>
<body>
<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.min.mjs" type="module"></script>
<script id="script" type="module">
  // url是pdf文件的链接地址
  const url = 'https://oss.xxxxxxxxxxx.pdf'
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.worker.mjs'
  const loadingTask = pdfjsLib.getDocument(url)
  const pdf = await loadingTask.promise
  const page = await pdf.getPage(1)
  const scale = 1.5
  const viewport = page.getViewport({ scale })
  const outputScale = window.devicePixelRatio || 1
  const canvas = document.getElementById("the-canvas")
  const context = canvas.getContext("2d")
  canvas.width = Math.floor(viewport.width * outputScale)
  canvas.height = Math.floor(viewport.height * outputScale)
  canvas.style.width = Math.floor(viewport.width) + "px"
  canvas.style.height = Math.floor(viewport.height) + "px"
  const transform = outputScale !== 1
    ? [outputScale, 0, 0, outputScale, 0, 0]
    : null
  const renderContext = {
    canvasContext: context,
    transform,
    viewport,
  }
  page.render(renderContext)
</script>

<pre id="code"></pre>
</body>
</html>

vue3组件中使用(直接上代码)

<template>
  <div class="pdf-container" v-loading="loading">
    <canvas id="the-canvas"></canvas>
    <div class="change-page-btns">
      <el-button type="primary" @click="changePage('prev')">上一页</el-button>
      &nbsp;&nbsp;<span> {{ currPageNum }} / {{ pageTotal }} </span>&nbsp;&nbsp;
      <el-button type="primary" @click="changePage('next')">下一页</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 在npm.org modules 市场没有找到对应的 pdf.js 应用，所以这里继续使用cdn网络，或者把代码下载到本地调用
 * https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.worker.mjs
 * https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.mjs
 */
import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.mjs'
import { ref, onMounted, reactive} from 'vue'

import { ElMessage } from 'element-plus'

const filePath = ref('https://oss.xxxxx.pdf') // 要展示的pdf文件链接地址
const loading = ref(false)
let CurrPdfInfo:any = reactive({})
const pageTotal = ref(1)
const currPageNum = ref(1) // 默认展示pdf文件的第一页

onMounted(() => {
  init()
})

const init = async () => {
  currPageNum.value = 1
  loading.value = true
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.worker.mjs'
  const loadingTask = pdfjsLib.getDocument(filePath.value)
  CurrPdfInfo = await loadingTask.promise
  pageTotal.value = CurrPdfInfo.numPages || 0
  loading.value = false
  RenderPage()
}

const RenderPage = async () => {
  const page = await CurrPdfInfo.getPage(currPageNum.value)
  const scale = 1
  const viewport = page.getViewport({ scale })
  const outputScale = window.devicePixelRatio || 1
  const canvas:any = document.getElementById("the-canvas") || null
  const context:any = canvas.getContext("2d")
  canvas.width = Math.floor(viewport.width * outputScale)
  canvas.height = Math.floor(viewport.height * outputScale)
  canvas.style.width = Math.floor(viewport.width) + "px"
  canvas.style.height = Math.floor(viewport.height) + "px"
  const transform = outputScale !== 1
    ? [outputScale, 0, 0, outputScale, 0, 0]
    : null
  const renderContext = {
    canvasContext: context,
    transform,
    viewport,
  }
  page.render(renderContext)
}

const changePage = (type:string) => {
  if (currPageNum.value === 1 && type === 'prev') {
    ElMessage.info('您已经操作到第一页!')
  } else if (currPageNum.value === pageTotal.value  && type === 'next') {
    ElMessage.info('您已经操作到最后一页!')
  } else {
    if (type === 'prev') { // 上一页
      currPageNum.value > 1 ? currPageNum.value-- : currPageNum.value = 1
    } else if (type === 'next') { // 下一页 CurrPdfInfo
      currPageNum.value < pageTotal.value ? currPageNum.value++ : currPageNum.value = pageTotal.value
    }
    RenderPage()
  }
}

</script>

<style scoped>
.pdf-container {
  width: 100%;
  height: 800px;
  border: 1px solid red;
  overflow: scroll;
}
</style>

uni-app H5中使用（新版本参考vue实现方式），以下是 **@dcloudio/uni-app-plus -v2.0.0 **为例来实现。---uniapp其他打包方式有原生api支持：uni.openDocument(OBJECT)。

// 此代码仅使用与uniapp打包成H5适用， 其他打包方式uni.openDocument(OBJECT)原生方法即可实现。

// 项目入口index.html文件中要引入 js 文件
// <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.js"></script>

<template>
  <scroll-view class="scroll-container" @scrolltoupper="loadPerPage" @scrolltolower="loadNextPage" scroll-y="true" scroll-x="true">
    <view id="pdf-container"></view>
  </scroll-view>
</template>

<script>
export default {
  name: 'scanPdf',
  data () {
    return {
      infoData: '',
      container: null, // 渲染pdf的canvas容器
      currPageNum: 1, // 默认渲染第一页
      pageTotal: 1,
      loadPageCount: 1,
      CurrPdfInfo: null,
      url: 'https://oss.xxxx/demo-ui.pdf'
    }
  },
  mounted () {
    this.initPdfViewer()
  },
  methods: {
    initPdfViewer () {
      this.currPageNum = 1
      this.loading = true
      uni.showLoading({title: '文件加载中...'})
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.js'
      this.container = document.getElementById('pdf-container')
      pdfjsLib.getDocument(this.url).promise.then(pdf => {
        uni.hideLoading()
        this.pageTotal = pdf.numPages || 0 // pdf文件共有多少页
        this.CurrPdfInfo = pdf
        this.renderPage() // 初始化完成数据默认渲染第一页
      })
    },
    renderPage () {
      // this.container.innerHTML = '' // 清空容器
      this.CurrPdfInfo.getPage(this.currPageNum).then(page => {
        const scale = 1
        const viewport = page.getViewport({ scale: scale })
        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')
        canvas.width = viewport.width
        canvas.height = viewport.height
        page.render({
          canvasContext: context,
          viewport: viewport
        })
        this.container.appendChild(canvas)
      })
    },
    loadNextPage () {
      if (this.loadPageCount <= this.currPageNum) {
        if (this.currPageNum < this.pageTotal) {
          this.currPageNum++
          this.loadPageCount = this.currPageNum
          this.renderPage()
        } else {
          this.currPageNum = this.pageTotal
          uni.showToast({
            title: '已经浏览到最后一页啦！',
            icon: 'none',
            mask: false
          })
        }
      }
    },
    loadPerPage () {
      uni.showToast({
        title: '已经浏览到第一页啦！',
        icon: 'none',
        mask: false
      })
    }
  }
}
</script>

<style scoped>
.scroll-container {
  width: 100%;
  height: 100%;
}
</style>

有其他适配后续更新

浏览器端、H5移动端加载预览pdf文件（Pdf.js的使用）

web、H5、vue等预览pdf文件（Pdf.js）

1. 使用场景

2. 使用方法

猜你喜欢

热点阅读