当前位置: 首页 > article >正文

vue3项目中使用pdfjs-dist踩坑记录

有这么一个需求,要求打开pdf文件实现预览,分页跳转、搜索关键字。期望效果如下:
在这里插入图片描述
经过一番调研选择使用pdfjs-dist来完成这一功能。

第一种方案:使用npm在项目中安装pdfjs-dist

npm install pdfjs-dist

执行安装文件报错了,应该是node版本不兼容,到https://www.npmjs.com/上找往期版本,查了一些评论,评价2.16.105版本兼容性好,安装试一下。

npm i pdfjs-dist@2.16.105

在代码中引入

<template>
  <Modal
    v-model="visible"
    fullscreen
    footer-hide
    @on-cancel="cancel"
  >
    <div id="pdf-view">
      <canvas v-for="page in state.pdfPages" :key="page" id="pdfCanvas" />
      <div id="text-view"></div>
    </div>
  </Modal>
</template>
<script>
    import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.js'
    import 'pdfjs-dist/web/pdf_viewer.css'
    import * as PDF from 'pdfjs-dist'
    PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
    const pdf = 'http://www.nhc.gov.cn/sps/s7887k/202301/0e55a01df50c47d9a4a43db026e3afc3/files/63f752a17cfd4b4781f744477561866f.pdf'
    let pdfDoc = null;
    export default {
        data () {
            return {
                state: {
                    // 文件路径
                    pdfPath: pdf,
                    // 总页数
                    pdfPages: 1, 
                    // 页面缩放
                    pdfScale: 1, 
                },
                visible: false,

            }
        },
        mounted () {
            // this.loadFile(this.state.pdfPath)
        },
        methods: {
            init () {
                this.visible = true
                this.loadFile(this.state.pdfPath)
            },
            cancel () {
                this.visible = false
            },
            loadFile(url) {
                PDF.getDocument({
                    url,
                    cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/',
                    cMapPacked: true,
                }).promise.then((pdf) => {
                    pdfDoc = pdf
                    // 获取pdf文件总页数
                    this.state.pdfPages = pdf.numPages
                    this.$nextTick(() => {
                        this.renderPage(1) // 从第一页开始渲染
                    })
                })
            },
            renderPage(num) {
                pdfDoc.getPage(num).then((page) => {
                    const canvas = document.getElementById('pdfCanvas')
                    const ctx = canvas.getContext('2d')
                    const viewport = page.getViewport({ scale: this.state.pdfScale })
                    canvas.width = viewport.width
                    canvas.height = viewport.height
                    const renderContext = {
                        canvasContext: ctx,
                        viewport
                    }
                    page.render(renderContext)
                })
            }
        }
    }
</script>

引入的过程中发生了报错
在这里插入图片描述
原因是需要在引入 pdf is-dist 之后配置 workerSrc,但是引入 pdf is-dist/bui1d/pdf. worker.entry之后浏览器还是有个警告:Warning;Settingup fake worker.,几方查找原来是pdf.workerjs必须位于自己的文件中(而不是与pdfjs捆绑在起)。否则它不能在服务工作线程中运行。
解决方式:将 pdfis-dist/bui1d/pdf.worker.is 复制一份放到项目 public 目录下

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

能够预览但是不是想要的效果,貌似这种只能实现pdf预览功能,而我想要的是官方演示的那种带各种操作的效果。

第二种方法:直接将预构建版本放入public文件夹下使用viewer.html

在这里插入图片描述
下载,解压到public文件夹下。
在这里插入图片描述
使用

// 直接在新窗口中打开
window.open(`/pdfjs-2.5.207-dist/web/viewer.html?file=${pdfurl}`, '_blank')

在这里插入图片描述
找到pdfjs-2.5.207-dist/web/wiewer.js
在这里插入图片描述
效果如下,有个bug,打开pdf文件以后,分页数字会被缓存,下次再打开,会停留在这个页面,如果想回到第1页,需要做一下处理。
在这里插入图片描述
在这里插入图片描述

上面这个方法只能禁用本地对跨域的检查,如果引用的pdf文件地址是外链,依然会报跨域问题,如果对pdf的来源不能确定是不太好解决的。
在这里插入图片描述
上面这种跨域限制,就需要后端介入处理了。
如果产品只是要预览pdf文件,可以用第一种方法或者在新窗口打开pdf文件查看。

window.open(pdfurl, '_blank')

在浏览器的新窗口打开查看pdf文件,没有跨域问题,遗憾的是显示效果不能控制。先记到这儿吧,后期如果有更好的解决跨域方案再来更新。

参考链接

  • https://blog.csdn.net/weixin_44104341/article/details/119821699?spm=1001.2014.3001.5506
  • vue3项目使用pdf.js插件实现:搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
  • 002-Vue项目中通过pdfjs实现PDF预览

http://www.kler.cn/a/303424.html

相关文章:

  • Python 连接 Redis 进行增删改查(CRUD)操作
  • NAT网络工作原理和NAT类型
  • 《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
  • 前端神经网络入门(三):深度学习与机器学习的关系、区别及核心理论支撑 - 以Brain.js示例
  • 使用kalibr_calibration标定相机(realsense)和imu(h7min)
  • 【Qt-ROS开发】使用 Qt Creator 构建和编译含 ROS 库的 Qt 项目
  • Docker基本管理--Dockerfile镜像制作(Docker技术集群与应用)
  • ubuntu20.04 Qt6引用dcmtk库实现dicom文件读取和字符集转换
  • CSP-J 之计算机基本结构
  • YOLO介绍—datawhale
  • C语言 | Leetcode C语言题解之第404题左叶子之和
  • shell脚本语法
  • ASP.NET MVC 迅速集成 SignalR
  • 【spring】IDEA 新建一个spring boot 项目
  • 【无人机设计与控制】旋转无人机摆锤的SDRE仿真
  • VSCode 编写 vue 项目之一键生成 .vue 页面模版
  • 计算机网络:概述 - 性能指标
  • 【Linux 从基础到进阶】Docker Compose 编排工具使用
  • CategoriesController
  • 什么是图像的边缘?说说边缘检测的任务以及基本原理?
  • 无人机应用新纪元:图形工作站配置推荐与硬件解析
  • 网络安全-dom破坏结合jq漏洞以及框架漏洞造成的xss-World War 3
  • Python | Leetcode Python题解之第402题移掉K位数字
  • labview禁用8080端口
  • 合宙低功耗4G模组Air780EX——硬件设计手册01
  • 同步和异步是两种不同的程序执行方式