- 综合排序
- 最热优先
- 最新优先
- 来自专栏电光石火
pdfjs跨域问题
当使用外部域名时提示Uncaught (in promise) Error: file origin does not match viewer's…… 修改viewer.js
1.3K10发布于 2019-12-05 - 来自专栏帅哥哥写代码
vue整合pdfjs，实现pdf文件预览
通过收集相关资料，找到pdfjs插件以支持文件的预览。 实现 1.vue中引入pdfjs依赖 npm install pdfjs-dist --save 2.使用canvas当预览pdf文件的画布 <canvas v-for="page in pages " :id="'the-canvas'+page" :key="page"></canvas> 3.调用pdfjs api进行文档渲染 _renderPage (num) { this.pdfDoc.getPage _renderPage(num + 1) } }) }, _loadFile (url) { PDFJS.getDocument(url).then((pdf
12.4K20发布于 2019-04-16 - 来自专栏Vue技术实践
超详细的vue3使用pdfjs教程
vue3中如何使用pdfjs来展示pdf文档 在项目开发中碰到一个需求是在页面中展示pdf预览功能，本人的项目使用的是vue3,实现pdf预览使用的是pdf预览神器 pdfjs 以下，将详细介绍如何在项目中使用 pdfjs，主要包括以下内容： 单页pdf加载 多页pdf加载 pdf放大/缩小/大小重置 pdf分页展示以及上下翻页 pdf添加水印 动态添加pdf 从服务端获取pdf文件 参考资料: pdfjs源码及使用文档 准备工作 1.1 pdfjs-dist 安装 百度搜索 npm pdfjs-dist，进入npm官方网站，即可查看pdfjs的安装方法： [b4b2aa71074a372033c33aa7008ccfbf.png ] 安装命令： npm i pdfjs-dist 2. 工作原理简述 pdfjs展示pdf文档的原理，实际上是将pdf中的内容渲染到解析，然后渲染到 canvas 中进行展示，因此我们使用pdfjs渲染出来的pdf文件，实际上是一张张canvas图片。
24.5K42发布于 2021-08-11 - 来自专栏thinkphp+vue
前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览
pptx） pptxjs pptxjs改造开发 excel（xlsx） sheetjs、handsontable exceljs(npm)、handsontable(npm)(npm) pdf（pdf） pdfjs pdfjs(npm) 图片 jquery.verySimpleImageViewer v-viewer(npm) docx文件实现前端预览 代码实现 首先npm i docx-preview 引入renderAsync 设置PDFJS.GlobalWorkerOptions.workerSrc的地址 通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc 通过pdfDoc.getPage单独获取第 1页的数据 创建一个dom元素，设置元素的画布属性 通过page.render方法，将数据渲染到画布上 import * as PDFJS from "pdfjs-dist/legacy/build/pdf "; // 设置pdf.worker.js文件的引入地址 PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js
3.8K51编辑于 2022-03-07 - 来自专栏前端达人
分享一些 word、excel、pdf、ppt、图片、文本等文件的预览工具
pptx） pptxjs pptxjs改造开发 excel（xlsx） sheetjs、handsontable exceljs(npm)、handsontable(npm)(npm) pdf（pdf） pdfjs pdfjs(npm) 图片 jquery.verySimpleImageViewer v-viewer(npm) docx文件实现前端预览 代码实现 首先npm i docx-preview 引入renderAsync 设置PDFJS.GlobalWorkerOptions.workerSrc的地址 通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc 通过pdfDoc.getPage单独获取第 1页的数据 创建一个dom元素，设置元素的画布属性 通过page.render方法，将数据渲染到画布上 import * as PDFJS from "pdfjs-dist/legacy/build/pdf "; // 设置pdf.worker.js文件的引入地址 PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/legacy/build/pdf.worker.entry.js
2.8K30编辑于 2022-04-18 - 来自专栏卡拉云-低代码开发工具
React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能
跟随本教程学习完成后，你会搭出以下 PDF 在线预览效果的 React PDF 预览组件 [React PDFjs 搭建效果] 如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具 ' import pdfWorker from 'pdfjs-dist/build/pdf.worker.js? ' import pdfWorker from 'pdfjs-dist/build/pdf.worker.js? 但是强大的 pdf.js 支持在相同的位置绘制文字，接下来我们实现它 import * as pdf from 'pdfjs-dist' import pdfWorker from 'pdfjs-dist url' + import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'; + import 'pdfjs-dist/web/pdf_viewer.css
6K20编辑于 2022-05-30 - 来自专栏日常记录
vue项目中， pdf解析组件
vue-components/tree/master/pdf 遇到的问题 参考文章 https://juejin.im/post/5c2c14eb6fb9a049d23627be 中文字体显示不全 PDFJS.cMapUrl /static/pdf/cmaps/' PDFJS.cMapPacked = true; 字体模糊 if(vm.initFlag){ //默认2倍缩放 vm.scales = 2 } 内部执行接口请求，获取pdf 通过pdfjs-dist来解析 ps: PDFJS插件不支持跨域解析， 如需解析跨域文件 或是测试， 请使用如 vue --> proxy
2.3K20发布于 2019-03-28 - 来自专栏pangguoming
PDF.js实现个性化PDF渲染（文本复制）
于是，我们搜寻到一个包：pdfjs-dist。 通过npm install pdfjs-dist，我们引入了PDF.js。 基础功能有两个必须引用的文件： pdf.js pdf.worker.js 如果使用CDN的方式，直接引用如下对应文件即可： 如果使用npm的方式，则在需要使用PDF.js的文件中如下引用: import PDFJS from 'pdfjs-dist'; PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'; 这两个文件包含了获取 如果是使用npm，则需要做如下引用： import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'; import 'pdfjs-dist/web 接着，我们修改JS代码： var container, pageDiv; function getPDF(url) { PDFJS.getDocument(url).then((pdf) =>
11.8K53发布于 2019-05-25 - 来自专栏黄啊码【CSDN同名】
【黄啊码】vue-pdf预览时无法显示印章和中文字体或者乱码（简单粗暴）
一般出问题的都是票据、合同之类的pdf，中文字体库没加载或加载失败，我们直接给它手动安排 cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/' 以下是前端代码 pdf.createLoadingTask({ 'url':this.webapi+file_url, cMapUrl: 'https://unpkg.com/pdfjs-dist 如果遇到乱码的情况，额，写那么多我感觉只会误导你们，把vue-pdf/src/pdfjsWrapper.js中的这个文件给我改了，直接抄，不用给它面子 import { PDFLinkService } from 'pdfjs-dist /es5/web/pdf_viewer'; var pendingOperation = Promise.resolve(); export default function(PDFJS) { : reasonStr = 'NEED_PASSWORD'; break; case PDFJS.PasswordResponses.INCORRECT_PASSWORD
3.1K10编辑于 2022-09-08 - 来自专栏mythsman的个人博客
Angular2下使用pdf插件
安装 这里需要安装两个包：pdfjs-dist和ng2-pdf-viewer，安装时是要顺便保存到package.json里的，因此在项目根目录下输入下面命令： npm install pdfjs-dist 'ng2-pdf-viewer': 'node_modules/ng2-pdf-viewer', 'pdfjs-dist': 'node_modules/pdfjs-dist' } 然后还要添加在 变量下： var packages = { 'ng2-pdf-viewer': { main: 'dist/index.js', defaultExtension: 'js' }, 'pdfjs-dist
1.4K20编辑于 2022-11-14 - 来自专栏程序员成长指北
Webview加载pdf遇到的一些坑及解决方法
初步加载 webview加载pdf的初步设想是使用js的方式去渲染， 新建一个js var url = location.search.substring(1); PDFJS.cMapUrl = 'https ://unpkg.com/pdfjs-dist@1.9.426/cmaps/'; PDFJS.cMapPacked = true; var pdfDoc = null; function createPage 100%; border: 1px solid black; } </style> <script src="https://unpkg.com/<em>pdfjs</em>-dist 其实有个非常强大的第三方库pdf.js[2]已经帮我们处理好了，pdf.js可通过pdf文件的地址或pdf数据流获取pdf，具体实现是调用接口函数 <em>PDFJs</em>.getDocument(url/buffer 默认字体库无法满足，那就添加新的字体库， 在pdf.js文件中添加cMapUrl = "cdn.jsdelivr.net/npm/pdfjs-d…[4]" ， params.rangeChunkSize
9.4K30发布于 2021-11-10 - 来自专栏网络安全攻防
社工钓鱼利器:CVE-2024-4367: PDF.js
/pdf.py --help usage: pdf-exploit [-h] -f F [-p P] -o O [-pdfjs PDFJS] [-foxit-exec FOXIT_EXEC] [-foxit-args the harmless pdf path -p P password -o O the new pdf file pdfjs : CVE-2024-4367 -pdfjs PDFJS javascript to be executed, example: alert(3) foxit: foxit /pdf.py -f ~/Downloads/data.pdf -o /tmp/data.pdf -pdfjs 'alert(3)' -foxit-exec cmd.exe -foxit-args "/
1K10编辑于 2024-07-16 - 来自专栏GoCoding
PDF.js Electron Viewer
Ant Design 添加 antd 依赖: npm install antd 之后，就可以快速布局页面了，如下： PDF.js 添加 pdfjs 依赖： npm install pdfjs-dist 导入包 import * as pdfjsLib from 'pdfjs-dist/webpack'; 2. ; })(); 完整代码，见 Pdfjs/index.tsx[4]。 导入包 import * as pdfjsLib from 'pdfjs-dist/webpack'; import { PDFViewer, EventBus } from 'pdfjs-dist/web /pdf_viewer'; import 'pdfjs-dist/web/pdf_viewer.css'; 2.
12.8K30编辑于 2021-12-17 - 来自专栏.NET企业级解决方案应用与咨询
使用 pdf.js 在网页中加载 pdf 文件
必须将 pdfjs-2.2.228-dist 包，部署在IIS上之后，通过http方式访问才能正常的加载显示pdf格式文件的内容 5、在IIS中部署之后，通过 http://localhost:8033 /pdfjs/web/viewer.html 方式访问该查看器。 实现方法：通过 标签链接到viewer.html页面，需要传递一个重要的参数【file】，设置为要显示的pdf文件的路径 <iframe src="Content/<em>pdfjs</em> 在 <em>pdfjs</em>-2.2.228\web\local目录下列出了很多种语言的资源包，找到 zh-CN。里面包含了对应的汉化信息。 ?
45K61发布于 2019-10-30 - 来自专栏web开发
react-pdf预览在线PDF的使用
React, { useState } from 'react' import { Modal, Spin, Alert } from 'antd' import { Document, Page, pdfjs Page/AnnotationLayer.css' import 'react-pdf/dist/esm/Page/TextLayer.css'; // 配置 PDF.js 的 worker 文件 pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString() interface PDFPreviewModalProps DownOutline, AddCircleOutline, MinusCircleOutline } from 'antd-mobile-icons' import { Document, Page, pdfjs = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString() interface PDFPreviewModalProps
1.6K10编辑于 2024-09-15 微信小程序加载PDF方案与加载慢问题优化
使用 <canvas> + pdfjs-dist（原生渲染，适合轻量级）直接在小程序中引入 pdfjs-dist 库，通过 Canvas 逐页渲染 PDF。 实现步骤：使用 npm 引入 pdfjs-dist：npm install pdfjs-dist构建并拷贝到小程序目录（需在小程序开发者工具中启用 npm 支持）。 示例代码：import * as pdfjsLib from 'pdfjs-dist';Page({ onLoad() { const url = 'https://example.com/sample.pdf 缺点：包体积大（pdfjs-dist 约 1MB+），影响小程序启动速度。渲染性能较差，尤其对大文件或低端设备。需要手动处理分页、缩放、滚动等。3. 无需额外配置无法自定义UI、无高级功能⭐⭐⭐⭐⭐<web-view> + PDF.js可自定义UI、支持高级功能需要额外配置、Android兼容性问题⭐⭐PDF转HTML无需额外依赖文件体积大、加载慢⭐pdfjs-dist
52610编辑于 2025-11-14- 来自专栏web前端随笔
pdf.js预览pdf文件流（base64）
mozilla.github.io/pdf.js/ 下载稳定版本，下载后解压，把他放在静态资源目录下面，我这里的项目是老项目，前后端么有分离的java项目，放在webapp下面，我把下载以后的文件解压重新命名为pdfjs function getPdf(fileBase64) { var href = serveUrl + '//pdfjs/web/viewer.html' var sessionStorage.setItem ('pdfBase', fileBase64) window.open(href,'_blank') } 4、对viewer.html文件的处理 打开pdfjs/web下的viewer.html viewer.js.map 打开viewer.js.map，搜索defaultUrl，把value更改为【DEFAULT_URL】，如图： 最后pdf预览如图(pdf内容打了马赛克)： 另外，更改以后的pdfjs
18.1K21编辑于 2022-11-14 - 来自专栏我和未来有约会
[mobile开发碎碎念]手机页面上显示PDF文件
script to be loaded, and dynamically loading a cross-origin script does // not work) // PDFJS.disableWorker = true; // // Asynchronous download PDF as an ArrayBuffer // PDFJS.getDocument(url)
1.7K90发布于 2018-01-16 - 来自专栏知无不言 - 畅所欲言
终极解决远程预览pdf问题
pdfjs 为我们做了其他的操作，。我们通过pdfjs只需要将本地文件当做参数传递给viewer.html就可以了。 远程加载(跨域) 通过上面我们很轻松在实际项目中实现pdf的预览。 /test/js/pdfjs/web/viewer.html?
1.1K10编辑于 2023-11-28 - 来自专栏我和未来有约会
[mobile开发碎碎念]手机页面上显示PDF文件
script to be loaded, and dynamically loading a cross-origin script does // not work) // PDFJS.disableWorker = true; // // Asynchronous download PDF as an ArrayBuffer // PDFJS.getDocument(url)
1.2K00发布于 2018-07-31
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号