vue3+pdf-dist 错误记录

pandarking

于 2024-04-21 20:26:00 发布

阅读量120

点赞数 1

分类专栏：笔记文章标签： pdf 前端 javascript vue

本文链接：https://blog.csdn.net/V1040375575/article/details/138044186

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在导入时总是报错

修改后正确格式

import * as pdfjsLib from 'pdfjs-dist'
import * as pdfWorkerMin from 'pdfjs-dist/build/pdf.worker.min?url'
// GlobalWorkerOptions.workerSrc 这个最麻烦，找了好久
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorkerMin.default

优惠劵

pandarking

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3+pdf-dist 错误记录

【代码】vue3+pdf-dist 错误记录。
复制链接

扫一扫

专栏目录

uni-app+Vue3+pinia+uview-plus搭建的项目包

12-28

uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...

vue项目使用pdf-dist、turn.js实现PDF文件仿翻书预览功能

sinat_38628334的博客

02-19

5291

在vue项目中使用pdf-dist.js和turn.js实现PDF文件仿翻书预览功能

参与评论您还未登录，请先登录后发表或查看评论

vue使用pdf-dist实现pdf预览以及水印

weixin_41360517的博客

10-18

1622

【代码】vue使用pdf-dist实现pdf预览以及水印。

解决 jspdf-dist 在预览 pdf 时一些文字内容丢失

最新发布

abcd123596的博客

03-22

1033

如何解决 jspdf-dist 在预览 pdf 时一些中文内容丢失可能是字体文件引入失败

pdf-dist实现pdf的预览

qq_40131668的博客

11-09

1142

pdf-dist使用

【无标题】

weixin_64310738的博客

02-16

2286

超详细的vue3使用pdfjs教程

vue3使用pdfjs-dist

weixin_45847765的博客

03-13

1797

如果需要使用点击跳页的话，用一个变量控制页码，然后在canvas上换成变量，每次跳页就+-数字就好，位置可以自己定位到需要位置。当前时间是可以使用的，刚实现过，后续如果不可以用了，可能是安装东西的版本迭代了。重新安装的时候版本不同了。如果不知道在哪，可以点开node_modules找到pdfjs-dist对应去改一下就好。然后找到对应位置： // vite.config.ts 文件。版本会引起报各种错，需要注意，实在不行复制错误搜索就好。不分页的话加载过大文件时速度很慢，可以懒加载，也可以分页。

Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统

05-02

Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...

基于 vue3 + ant-design-vue 的中后台管理系统.zip

05-26

基于 vue3 + ant-design-vue 的中后台管理系统.zip

vue3-element-admin：vue3 + element-plus + typescript 后台管理系统

05-04

vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...

vue3+webpack+vue-router路由封装+axios封装+vuex封装

05-23

vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...

vue3中借助 pdfjs-dist 实现pdf文件展示、文本选中功能及使用过程中部分问题处理

qq_45897239的博客

02-06

3143

一、文件预览 1、安装 `pdfjs-dist` ，此处指定版本为 `2.16.105` 2、`html` 结构内容 3、`js` 功能实现： 4、可能出现的问题 (1) 部分字体出现乱码或浏览器控制台出现警告二、文本选中 1、功能实现 2、可能出现的问题： (1) 页面文字可选中，但文本不可见 (2) 浏览器控制台报错 `Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispatch

vue引入pdf.js版本报错

ssd369的博客

09-18

1001

这里写自定义目录标题vue引入pdf.js版本报错 vue引入pdf.js版本报错 npm install 导入依赖后启动项目时报如下错误经过一番查找，是导入依赖时，pdfjs-dist版本与项目中pdf.js版本不符执行 npm i pdfjs-dis[email protected] 导入对应版本的pdfjs-dist，问题解决！具体可查看https://github.com/mozilla/pdf.js/issues/13190解答 ...

pdfjs-dist在vue的使用

qq_42613224的博客

08-31

1926

背景：iframe展示 pdf 在 IE 浏览器直接下载文件，无法预览展示。 2.创建组件文件没做翻页，展示全部页下滑展示然后在对应的地方引入即可，传入对应的 src 路径；

pdfjs-dist使用上由版本导致的问题

weixin_44054904的博客

05-06

3470

发现是目前版本pdfjs（3.5.141）用到了es2020语法，vue2中暂不支持这种写法。简单粗暴直接降版本到pdfjs-dis[email protected]，且引用方式改为。项目中需要开发一个pdf预览插件，在安装pdfjs-dist后报错误。后面的详细原因有空补充。

解决vue3 vue-pdf报错Uncaught (in promise) TypeError: h is not a function

weixin_40857648的博客

01-04

5443

在使用vue3时vue-pdf插件报错：componentFactory.js?0d60:16 Uncaught (in promise) TypeError: h is not a function 解决方法是安装vue3的插件，2的不兼容

超详细的vue3使用pdfjs教程

热门推荐

CherishTheYouth的博客

08-11

2万+

vue3中如何使用pdfjs来展示pdf文档在项目开发中碰到一个需求是在页面中展示pdf预览功能，本人的项目使用的是vue3,实现pdf预览使用的是pdf预览神器 pdfjs 以下，将详细介绍如何在项目中使用pdfjs，主要包括以下内容：单页pdf加载多页pdf加载 pdf放大/缩小/大小重置 pdf分页展示以及上下翻页 pdf添加水印动态添加pdf 从服务端获取pdf文件参考资料: pdfjs源码及使用文档 1. 准备工作 1.1 pdfjs-dist 安装百度搜索 npm pdfjs

vue3.0使用pdfjs-dist查看pdf文件

果酱的博客

12-10

4528

前情：项目要的急，就简单的能看pdf文件，没有其他功能我用的pdfjs-dist版本号：2.5.207 下面是代码封装组件 <template> <template v-for="item in pageNum" :key="item"> <canvas :id="`pdf-canvas-${item}`" class="pdf-page" /> </template> </template> <script>.

pdfjs-dist插件的使用

weixin_50649221的博客

07-12

3569

目前这个插件已经更新到了3.8.162，我看到很多网上的教程都是用的require引入，但是我使用的vite项目已经不支持require语法，然后自己踩了比较多的坑，最后成功用上。这里用了两个版本是因为我在vite项目中，用3.X的版本是能用的，但是在一个nuxt项目中用不了，会有各种各样的报错，然后我试了很多版本，最终用2.6.347成功了。

VUE+pdfjs-dist标注

10-18

好的，您想了解关于VUE和pdfjs-dist的标注方面的内容，我可以为您提供一些帮助。首先，您需要在Vue项目中安装pdfjs-dist库，可以使用npm命令进行安装： ``` npm install pdfjs-dist ``` 然后，在Vue组件中引入pdfjs-dist库，并使用它来加载PDF文件： ```javascript import pdfjsLib from 'pdfjs-dist'; pdfjsLib.getDocument('path/to/pdf').promise.then(function(pdf) { // 加载成功后的操作 }); ``` 接下来，您可以使用pdfjs-dist库提供的API来进行标注。例如，您可以使用pdfjs-dist库提供的PDFPageView类来渲染PDF页面，并在页面上添加标注： ```javascript pdf.getPage(pageNumber).then(function(page) { var viewport = page.getViewport({scale: 1.0}); var canvas = document.getElementById('pdf-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext).promise.then(function() { // 渲染成功后的操作 var pageView = new pdfjsViewer.PDFPageView({ container: document.getElementById('pdf-container'), id: pageNumber, scale: 1.0, defaultViewport: viewport, eventBus: eventBus, annotationLayerFactory: new pdfjsViewer.DefaultAnnotationLayerFactory(), renderInteractiveForms: true, textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory(), annotationStorage: new pdfjsViewer.AnnotationStorage(), imageResourcesPath: './images/', enhanceTextSelection: true, renderMode: pdfjsViewer.RenderMode.INTERACTIVE }); pageView.setPdfPage(page); pageView.draw(); }); }); ``` 以上代码中，我们使用PDFPageView类来渲染PDF页面，并在页面上添加标注。您可以根据自己的需求来修改代码。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交