前端实现:base64格式的PDF预览

本文介绍了如何在前端使用pdf.js库将接口返回的Base64编码转换为PDF预览,并解决了PDF中文不显示及IE浏览器兼容性问题。在解决中文显示时,需要引入pdf.js的字体库并配置cMapUrl。
摘要由CSDN通过智能技术生成

这两天接到个需求,需要将接口返回的base64编码转成PDF文档在浏览器中实现预览。要求转换操作放在前端处理。在此之前没做过,于是乎开始百度,发现大部分推荐的就是pdf.js。

pdf.js 入门使用指南

一:下载和安装
1:进入官网下载地址:
http://mozilla.github.io/pdf.js/getting_started/#download
2:下载好解压后复制bulid目录下的pdf.js和pdf.woker.js到自己的项目中即可。
3:关于测试demo大家可以自行百度查看,非常简单。需要有一个
的标签。

贴上我的代码供大家参考:
JS部分代码,基本不需要改动网上的demo代码

遇到的两个坑

1:预览的pdf中文不显示;
不显示中文的代码:
pdfjsLib.getDocument({ data: pdfData })

这是由于存在pdf不支持的字体格式,需要引入pdf.js字体库。

https://unpkg.com/pdfjs-dist@2.0.489/cmaps/
引入后放在对应文件夹下修改代码如下,pdf完美展现;
var CMAP_URL = ‘cmaps/’
pdfjsLib.getDocument(

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值