Vue学习之:在 vue2 中引入 pdf.js 并配置使其能工作

安装

  • 不同版本的 pdfjsnode_modules 中的目录不太一样,如果你想让他正常运行就按照我下面的来
  • 确保你的 nvm 版本是 18.17 如果不是的话,建议你配置跟我调成一样的,否则很容易出问题
nvm install 18.17.0
nvm use 18.17.0
  • 安装 pdfjs,指定版本号 @2 如果你默认下的话会下载 4 开头的版本,会有各种问题
npm install pdfjs-dist@2
  • 运行以下命令以安装处理类私有方法的 Babel 插件:
npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods

配置

  • container 的位置 css 设置一定要是 absolute
  • 一定要配置好 EventBus
  • 导入 pdfjsLib 的时候一定要用 import * as pdfjsLib from "pdfjs-dist/build/pdf"; 不能用 import pdfjsLib from "pdfjs-dist/build/pdf"; 否则你无法设置 GlobalWorkerOptions
  • 设置 GlobalWorkerOptions 的时候,本地的如果不行,就按照下面我代码的写 pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
    • 但是注意其中的 2.16.105 要换成你自己安装的 pdf.js 版本号;在 package.json 中可以查看
  • 在你的 babel.config.js 配置成:
module.exports = {plugins: ["@babel/plugin-proposal-class-properties","@babel/plugin-proposal-private-methods"]
};

示例代码

<template><div id="pageContainer"><div id="viewer" class="pdfViewer"></div></div>
</template><script>
// 导入 pdfjsLib 的方法要注意 import * as ...
import * as pdfjsLib from "pdfjs-dist/build/pdf";// 引入 eventbus 和 pdfviewer,后面需要配置
import { PDFViewer, EventBus } from "pdfjs-dist/web/pdf_viewer";// 引入样式
import "pdfjs-dist/web/pdf_viewer.css";// globalworker 设置,用 CDN 的资源;如果你本地的也可以那就可以配置成本地的 "pdfjs-dist/build/pdf.worker.min.js"
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";export default {name: "PdfViewer",mounted() {this.getPdf();},methods: {async getPdf() {let eventBus = new EventBus();let container = document.getElementById("pageContainer");let pdfViewer = new PDFViewer({container: container,eventBus: eventBus,	});let loadingTask = pdfjsLib.getDocument("你自己的文件.pdf");let pdf = await loadingTask.promise;pdfViewer.setDocument(pdf);}}
};
</script><style>
#pageContainer {position: absolute;			//position设置成 absolutemargin: auto;width: 80%;
}div.page {display: inline-block;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/838625.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营day25 | 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 看题解做出来的 class Solution:def trimBST(self, root: Optional[TreeNode], low: int, high: int) -> Optional[TreeNode]:if not root:return Noneif root.val < low:return self.trimBST(root.right, low, high)if root.val > high:return…

【栈的应用】中缀和后缀表达式 {中缀转后缀表达式;中缀表达式求值;后缀表达式求值}

中缀转后缀表达式 在中缀变后缀时&#xff0c;操作数的顺序不会发生变化&#xff0c;只有运算符的顺序可能发生变化。同时又没有括号。所以在转换的过程中&#xff0c;只要碰到操作数&#xff0c;可以直接输出&#xff0c;而遇到运算符和括号进行相应的处理即可。 转换原则如…

SD8063音频功率放大器5V音频功率放大器低功耗

SD8063是一个双桥接音频功率放大器&#xff0c;当 连接到一个5V的pp时&#xff0c;将ver2.2W toa4ΩL oad(No电话)or2.5瓦至a3欧洛a(第2项) THDN含量小于an1.0%此外&#xff0c;耳机输入引 脚允许放大器在单端模式下工作时&#xff0c;驾驶立 体声耳机。 Boomer音频功率放大器的…

Java静态方法和实例方法有何不同?

在Java中&#xff0c;方法可以分为静态方法和实例方法。这两种方法的区别在于它们的调用方式、访问权限以及应用场景。理解这两者的区别对于掌握Java编程非常重要。下面我们将详细剖析这两者的区别&#xff0c;并通过代码示例加以说明。 1. 调用方式 静态方法的调用 静态方法…

代码随想录算法训练营day26 | 77. 组合

理论 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。 回溯法并不是什么高效的算法。因为回溯的本质是穷举&#xff0c;穷举所有可能&#xff0c;然后选出我们想要的答案&#xff0c;如果想让回溯法高效一些&#xff0c;可以加一些剪枝的操作&#xff0c;但也改…

MySQL单表查询案例演示

目录 一、创建数据库lianxi 二、选择数据库为lianxi 三、新建一个数据表grade&#xff0c;在grade表中插入数据 四、开始进行查询操作&#xff08;验证表中数据&#xff09; 1、查询1945班的成绩信息 2、查询1945班&#xff0c;语文成绩大于60小于90的成绩信息 3、查询学…

优雅谈论大模型8:神经网络与矩阵

向量与矩阵 上个章节的神经网络是为了解Transformer或者Mamba做好铺垫&#xff0c;在和后辈交流过程中发现有个障碍&#xff0c;那就是向量和矩阵。其实向量和矩阵的表达方式不是所有人都很习惯。在继续下面的章节之前小编认为有必要将向量、矩阵和神经网络做下补充解释。 向…

18.双线性插值缩放算法的matlab与FPGA实现

一篇文章为你讲透双线性插值 简介 1.什么是插值 图片放大是图像处理中的一个特别基础的操作。几乎在每一个图片相关的项目中&#xff0c;从传统图像处理到i深度学习&#xff0c;都有应用。   简单来说&#xff0c;插值指利用已知的点来“猜”未知的点&#xff0c;图像领域插…

RocketMQ 面试题(三)

1. RocketMQ如何处理大量积压的消息&#xff1f; RocketMQ在处理大量积压的消息时&#xff0c;会采取一系列策略来确保消息能够被及时消费并减少积压的情况。以下是一些处理大量积压消息的关键措施&#xff1a; 增加消费者实例或消费者组&#xff1a;通过增加消费者实例或消费…

华为OD机试【分奖金】(java)(100分)

1、题目描述 公司老板做了一笔大生意&#xff0c;想要给每位员工分配一些奖金&#xff0c;想通过游戏的方式来决定每个人分多少钱。按照员工的工号顺序&#xff0c;每个人随机抽取一个数字。按照工号的顺序往后排列&#xff0c;遇到第一个数字比自己数字大的&#xff0c;那么&…

C++ STL概念之 仿函数(函数对象)/ 空间配置器 / 适配器 / 理解STL

仿函数&#xff08;函数对象&#xff09; 什么是仿函数 仿函数&#xff0c;或称为函数对象&#xff0c;在C中是通过重载operator()的类实例&#xff0c;使得类的实例能够像函数一样被调用。 可调用对象 函数指针&#xff08;Function Pointers&#xff09;: 这是指向函数的指…

【class9】人工智能初步(处理单张图片)

Class9的任务&#xff1a;处理单张图像 为了更高效地学习&#xff0c;我们将“处理单张图像”拆分成以下几步完成&#xff1a; 1. 读取图像文件 2. 调用通用物体识别 3. 提取图像分类信息 4. 对应分类文件夹还未创建时&#xff0c;创建文件夹 5. 移动图像到对应文件夹 0.获取…

Ubuntu 安装 eclipse 的详细过程及工程创建和编译配置

目录 一、安装环境二、下载依赖 java jdk三、下载 eclipse四、安装4.1 java 环境4.2 eclipse 安装4.3 打开 eclipse 五、配置 eclipse5.1 新建 C 工程5.2 工具链 配置5.3 头文件路径5.4 链接库5.5 编译 一、安装环境 Ubuntu 版本&#xff1a;22.04.3 位数&#xff1a;64-bit 二…

记录一次 vue2 前端项目整合过程

整合成功效果图 具体说明&#xff1a; 项目A是现在的vue2前端项目&#xff0c;项目B是一个开源的工作流前端&#xff0c;项目后端代码已经整合了&#xff0c;就不多提了。这里主要记录下前端整合的过程和思路。 1、开源工作流里面的功能&#xff0c;拷贝到自己对应的vue2项目里…

PHP常量[特性,定义,输出,内置常量]

常量是一个在程序执行期间不能被修改的值。 特性 名称&#xff1a;常量的名称遵循大小写敏感的规则&#xff0c;但它们都推荐使用大写字母和下划线来增强可读性。值&#xff1a;常量的值可以是数字、字符串或表达式的结果&#xff0c;但一旦定义&#xff0c;就不能被改变。作…

大模型MoE技术深度解读,引领AI走向新高度

大模型系列之解读MoE Mixtral 8x7B的亮相&#xff0c;引领我们深入探索MoE大模型架构的奥秘。MoE究竟是什么&#xff1f;一起揭开它的神秘面纱。 1. MoE溯源 MoE&#xff0c;源自1991年的研究论文《Adaptive Mixture of Local Experts》&#xff0c;与集成学习方法相契合&…

机器学习笔记 KAN网络架构简述(Kolmogorov-Arnold Networks)

一、简述 在最近的研究中,出现了号称传统多层感知器 (MLP) 的突破性替代方案,重塑了人工神经网络 (ANN) 的格局。这种创新架构被称为柯尔莫哥洛夫-阿诺德网络 (KAN),它提出了一种受柯尔莫哥洛夫-阿诺德表示定理启发的函数逼近的方法。 与 MLP 不同,MLP 依赖于各个节…

NASA数据集——GES DISC 的 AIRS-CloudSat 云掩模、雷达反射率和云分类匹配 V3.2 (AIRS_CPR_MAT)

AIRS-AMSU variables-CloudSat cloud mask, radar reflectivities, and cloud classification matchups V3.2 (AIRSM_CPR_MAT) at GES DISC GES DISC 的 AIRS-CloudSat 云掩模、雷达反射率和云分类匹配 V3.2 (AIRS_CPR_MAT) 简介 这是 NetCDF-4 格式的 AIRS-CloudSat 定位子…

php 抖音授权登陆

前端&#xff1a; <view class"form weapp"><button v-if"page.agree" open-type"getPhoneNumber" getphonenumber"ttLogin" class"btn":class"{ disabled: !page.agree, ttprefix: page.mode tt }">…

餐谱的展示程序

开发背景 可以根据分类直接找到需要展示的餐谱&#xff0c;大的分类A、B、C、D等 二级分类 A1、A2、A3、A4。。。 餐谱就是图片 加 说明 页面 选择一级分类A&#xff0c;选择二级分类A1&#xff0c;查询出该分类下的餐谱 代码 /*** 查询列表*/RequiresPermissions("…