pdfjs实现pdf预览

pdfjs官网

http://mozilla.github.io/pdf.js/

Demo

示例效果

主要代码

//用 promise 获取页面
PDFJS.getDocument(fileURL).then(function (pdf) {});// 获取i页的页面
pdf.getPage(i).then(function (page) {})// 识别pdf中文本
page.getTextContent().then(function(textContent) {for(let j = 0; j < textContent.items.length; j++) {// textContent.items[j].str为识别到的文本字符串}
});// 渲染pdf
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {// 渲染完成
});

若字体未显示或者乱码，检查是否设置cMapUrl

PDFJS.cMapUrl = '/assets/pdfjs/cmaps/';
PDFJS.cMapPacked = true;

注意：

如果未加载成功，检查一下pdf路径是否正确，是否在同一域名下，
例如报错：

可本地安装服务器进行测试，也可使用vscode的Live Server插件（index.html上点击右键选择Open with Live Server自动打开浏览器）

完整代码

完整代码链接

pdfjs实现pdf预览相关推荐

VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供预览和下载功能,**PDF** 类型文件的来源又包括 H5 移动端和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...
uni-app实现PDF预览功能（避坑看这）
目录前言一.下载PDF预览相关文件二.使用步骤前言去年就想写一篇关于uni-app的pdf预览功能,拖很久了,补上. 一.下载PDF预览相关文件下载地址解压后效果: 二.使用步骤在 ...
前端实现 PDF 预览的常见方案
前端实现 PDF 预览的常见方案由于在搭建个人博客时,想实现在线预览 pdf 格式的个人简历,经过查阅大致有三大类实现方案:本文共涉及以下 5 种实现方案,如下所示: 使用 HTML 标签 ifra ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
第一种是用: <iframe> 嵌套显示先上效果图: 注:这种还带样式的是我后面修改源码的 js添加的 : customToolbar.js //创建一个新样式 let sheet ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
Winforn中使用FastReport实现点击导出按钮PDF预览并弹出另存为对话框
场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
SpringBoot+FreeMarker+flying-saucer-pdf实现PDF预览、分页需求
文章目录 SpringBoot+FreeMarker+flying-saucer-pdf实现PDF预览.分页需求需求说明程序示例程序示例说明添加依赖包 FreeMarker模板文件编写工具类 ...

pdfjs实现pdf预览

pdfjs官网

Demo

主要代码

若字体未显示或者乱码，检查是否设置cMapUrl

完整代码

pdfjs实现pdf预览相关推荐

最新文章

热门文章