vue-pdf预览 源码修改线上同步部署

最新推荐文章于 2023-04-14 10:04:55 发布
最新推荐文章于 2023-04-14 10:04:55 发布
阅读量212 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaissgf/article/details/129522313
版权
在开发中使用vue-pdf插件预览PDF文件时，遇到中文乱码和印章不显示的问题，可以尝试修改pdfjsWrapper.js和pdf.worker.js的源码。对于中文问题，需引入CMapReaderFactory.js。若源码修改后线上部署不同步，可将插件私有化部署到src目录并忽略node_modules。
摘要由CSDN通过智能技术生成

开发中我们使用vue-pdf插件预览pdf文件 一些含有印章或者中文的合同会出现乱码 及印章不显示的问题 解决措施是修改对应插件的源码 

该警告是因为当pdfRender属性为null会进行catch捕捉  不会对文件读取进行影响 我们只需要找到node_modules/vue-pdf/src/pdfjsWrapper.js 的这个文件 删除捕捉的代码即可

 遇到印章不生效的情况我们也不要慌张

vue-pdf插件无法解析文件的印章 pdf-dist 内部导致，需要修改这个npm包的源码 node_modules/pdfjs-dist/es5/build/pdf.worker.js 这个目录 

 无法解析中文

vue-pdf是vue中展示pdf文件的常用插件，在pc端和移动端都有较好的显示效果。但如果载入的pdf中有中文，可能会显示不出来或者乱码，控制台中报错如下

在项目中引入“CMapReaderFactory.js”，引入方式如下：

修改源码 线上部署不同步

需要单独抽离该插件 作为私有库部署放到src目录下  gitorione忽略node_modules文件

他亲爱的爸爸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决webpack4+升级webpack5+ vue-pdf不可用问题
06-09
Compiled with problems: × ERROR in ./node_modules/vue-pdf/node_modules/pdfjs-dist/es5/build/pdf.worker.js (./node_modules/vue-pdf/node_modules/worker-loader/dist/cjs.js!./node_modules/vue-pdf/node_modules/pdfjs-dist/es5/build/pdf.worker.js) Module build failed (from ./node_modules/vue-pdf/node_modules/worker-loader/dist/cjs.js): Error: MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)
vue-pdf-show:前端PDF显示和盖章（vue）
05-03
npm install npm运行开发 输入
vue源码解析pdf_MVVM (Vue)源码解析
weixin_39732640的博客
12-10 374
MVVM 框架模型的核心是双向绑定，即当 viewModel 中 data 数据发生改变如何改变 view 中的数据，当 view 中数据发生改变后如何改变 viewModel 中的 data 数据：上图中表明了通过 input 事件来监听 view 中数据的改变，再在 JS 中通过定义事件来改变 data 中对应数据，通过 Object.defineProperty API 来监听 data 数...
vue-pdf预览 封装pdf插件 源码修改线上同步部署
kaissgf的博客
03-14 358
vue-pdf插件无法解析文件的印章 pdf-dist 内部导致，需要修改这个npm包的源码 node_modules/pdfjs-dist/es5/build/pdf.worker.js 这个目录。开发中我们使用vue-pdf插件预览pdf文件 一些含有印章或者中文的合同会出现乱码 及印章不显示的问题 解决措施是修改对应插件的源码。vue-pdf是vue中展示pdf文件的常用插件，在pc端和移动端都有较好的显示效果。但如果载入的pdf中有中文，可能会显示不出来或者。遇到印章不生效的情况我们也不要慌张。
vue源码解析pdf_Vue源码逐行解析十三 validateProp函数 （处理props参数）
weixin_39998541的博客
12-09 276
首先我们打开‘src/core/instance/lifecycle.js'文件，代码如下：export function validateProp ( key: string, propOptions: Object, propsData: Object, vm?: Component): any { const prop = propOptions[key] const absen...
vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
热门推荐
wang13679201813的博客
04-14 1万+
官网下载地址：https://mozilla.github.io/pdf.js/getting_started/#download.1、使用pdfjs已经写好的viewer.html页面。下载后将pdf.js 放到服务器上 如：http://xxxx:8080/static/pdfjs。这种方法需要从官网上将pdf.js包下载下来。pdf.worker.js:负责核心解析。通过插件docx-preview实现。2、将PDF文件渲染成Canvas。pdf.js: 负责API解析，
vue-pdf预览pdf文件流
01-13
`vue-pdf`是一个强大的插件，它允许我们在Vue组件中轻松地集成PDF预览功能。这个插件是基于PDF.js库构建的，PDF.js是由Mozilla维护的一个开源项目，用于在浏览器中呈现PDF文件，而`vue-pdf`则是将其包装成适用于Vue...
Vue+ElementUI使用vue-pdf实现预览功能
10-15
在Vue.js框架的项目中，使用vue-pdf插件可以非常方便地集成PDF文件预览功能。以下是从给定文件信息中提取出的关于实现Vue+ElementUI中使用vue-pdf实现PDF预览功能的知识点。 首先，要使用vue-pdf插件，需要通过npm...
vue-pdf预览分页版
06-02
pdf预览
vue-pdf预览pdf文件流示例
12-26
下面我们将深入探讨如何使用vue-pdf来预览PDF文件流。 首先，你需要安装`vue-pdf`库。可以通过npm或yarn来完成： ```bash npm install vue-pdf # 或者 yarn add vue-pdf ``` 在安装完成后，我们需要在Vue组件中...
vue-pdf:vue.js pdf查看器
05-07
vue-pdf vue.js pdf查看器 安装 npm install --save vue-pdf 示例-基本 < template> < pdf xss=removed></ pdf> </ template> < script > import pdf from ' vue-pdf ' export default { components : { pdf } } 演示版 待定：修复演示 浏览器支持 与相同的浏览器支持 笔记 从v2.x开始，该脚本将导出为esm。 原料药 道具 ：src字符串/对象-默认值：'' pdf文件的网址。 src也可以是string|TypedArray|DocumentInitParameters|PDFDataRangeTransport以获得更多详细信息，请参见 。 ：页码
PDF.Vue.JS
03-28
PDF.Vue.JS
Vue 源码深入解析 附代码
04-30
深入解析Vue开始到结束过程中发生了什么， 组件内的数据是怎样支持双向绑定以及如何刷新视图的。
解决vue-pdf查看pdf文件及打印乱码的问题
01-18
vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题 vue-pdf 使用 安装 npm install –save vue-pdf 引入 import pdf from “vue-pdf 自定义封装pdf预览组件 close-on-click-modal=false show-close=...
vue源码解析pdf_Vue中$nextTick源码解析
weixin_39980002的博客
12-12 70
在做项目的时候，我们经常会用到nextTick，简单的理解就是它就是一个setTimeout函数，将函数放到异步后去处理；将它替换成setTimeout好像也能跑起来，但它仅仅这么简单吗？那为什么我们不直接用setTimeout呢？让我们深入剖析一下。发现问题记得之前有一个需求，就是根据文字的行数来显示展开更多的一个按钮，因此我们在Vue中给数据赋值之后需要获取文字高度。<div id="a...
base64转pdf_细品pdf.js实践解决含水印、电子签章问题「Vue篇」
weixin_39634067的博客
11-25 724
作者：jerryWu转发连接：https://juejin.im/post/5ec48f84e51d45788266753apdf.js实战，含水印、电子签章解决方案项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。一、vue-pdf直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优...
vue源码解析pdf_从源码中学Vue(五 ) 解析「观察者」Watcher做了什么？
weixin_39597318的博客
12-10 649
欢迎来到我的《从源码中学Vue》专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)上一章节我们说到了在Vue中的数据劫持(Observer)的基本原理是通过ES5的API Object.defineProperty来实现的。本章目标Vue初始化的时候，为什么会主动渲染模板数据Vue的发布订阅模式单纯的只是实现数据劫持是远远不够的，我们需要在数据发生变化的时候需要去更新视图(html),那么Vue...
用vue-pdf包实现pdf文件预览，支持分页
weixin_42284117的博客
09-17 5464
vue项目实现pdf文件预览功能 下载vue-pdf包 npm install --save vue-pdf template模板内容： //pdf组件 <pdf :src="pdfFile" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdf"> </pdf> //分页 <div class="pageBut
vue源码解析pdf_Vue源码全面解析二十八 baseCompile函数（模板解析核心函数）
weixin_39805409的博客
12-10 148
本章我们将进去模板解析的核心代码，也是模板解析的最后步骤了，我们来看看整个模板解析的流程。我们一起来看看代码：export const createCompiler = createCompilerCreator(function baseCompile ( template: string, options: CompilerOptions): CompiledResult { const...
uniapp 使用 vue-pdf预览pdf 并制定 vue-pdf插件的版本
最新发布
11-20
以下是在uni-app中使用vue-pdf预览pdf并指定vue-pdf插件版本的方法： 1. 安装vue-pdf插件 ```shell npm install vue-pdf@0.8.13 --save ``` 2. 在需要使用pdf预览的页面中引入vue-pdf组件 ```vue <pdf :src=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值