解决react项目中PDF的显示与打印问题

最近项目中有这样一个需求:

  1. 页面中可以显示pdf
  2. 不希望把整个页面打印下来,只打印显示PDF的部分,可以使用浏览器自带打印功能

PDF文件的显示

拿到这个需求,真时一头雾水。因为没有做过类似需求,不知从何下手。在查阅资料的过程中,发现有很多jQuery插件可以实现显示pdf, 但是我们是react单页面应用项目,看来这些插件并不适用,只能另寻其它方法。

后来在 npmjs.com 上找到了 react-pdf-js 组件, 心想显示pdf有望。就迫不及待将 react-pdf-js 依赖 通过 cnpm install react-pdf-js --save-dev 命令安装到项目中,通过 import PDF from 'react-pdf-js' 引入到项目里。将<PDF file={pdfUrl} onDocumentComplete={this.onDocumentComplete} onPageComplete={this.state.page} />插入render里。

在调试过程中发现静态pdf文件可以显示,在线pdf文件不能显示。通过控制的报错信息了解道,react-pdf-js组件要求file文件地址是url或者base64格式, 既然url行不通,就只能往base64上靠了。

获取PDF文件

一开始我直接将将pdf的在线地址url转换为base64,但是不能显示。后来想明白了,只把url转换成base64格式是没有用的,需要把pdf的文件内容转换成base64才行。接下来就顺理成章,通过从后台获取到的pdf的url地址,再次请求获取到pdf文件。

在做这部分的遇到一个小问题:能请求成功,就是获取不到pdf文件,在这纠结了很久,也不知道该如何解决,把问题描述给我们公司的架构师,我们分析这是跨域问题造成的,他给nginx服务器的配置解决了跨域问题。

'Content-Type':  'application/x-www-form-urlencoded;charset=utf-8',
'Access-Control-Allow-Origin': 'https://www.nurse-go.cn:9091',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'X-Custom-Header',
'Access-Control-Allow-Credentials': true,
将PDF文件转换为base64格式

base64可以存储任何格式的文件,一种的很棒的存储方法。将文件转换为base64格式

这里需要注意请求pdf文件的时候要设置responseType为blob, 为什么使用blob类型下面解释,到这我就拿到了pdf文件,将其转化为base64格式。

let reader  = new FileReader()
let fileParts = []
fileParts.push(this.props.pdfFile)
let blob = new Blob(fileParts, {type : 'application/pdf'})
if (blob) {
    reader.readAsDataURL(blob)
}
let base64
let that = this      // 处理this的指向  
reader.addEventListener("load", function () {
    base64 = reader.result
   that.setState({
          base64: base64,
 })
}, false);

base64格式的转换,需要时blob格式,将转化为base64格式的pdf,在file={file}, 将其在浏览器上显示出来。实际上最终是以canvas来呈现的PDF。

pdf显示算是告一段落,接下来就是打印了。


PDF文件的打印

在浏览器上,打印分整页打印和指定部分打印。项目需要打印制定部分内容打印,实现打印的方法多种多样,我使用了传统的css控制。通过@media print将打印时不需要打印的部分隐藏掉,那么剩下的就是要打印的部分了。

PDF文件打印调试

这里有个调试的小技巧:因为只有当调用了浏览器的打印才会调用@media print 里的样式,所以可以将这部分样式放在外面,当将不需要打印的部分都隐藏掉了,再将外部的这些样式去掉,给@media print即可。

调用浏览器的打印使用的 window.print(), 虽然不能兼容所有浏览器,但是常见的高级浏览器都可以兼容,满足了我们的项目需求,这里我就没有继续深挖。

pdf的显示与打印,前前后后遇到了不少问题,以上流水做个总结。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,717评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,501评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,311评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,417评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,500评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,538评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,557评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,310评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,759评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,065评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,233评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,909评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,548评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,172评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,420评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,103评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,098评论 2 352

推荐阅读更多精彩内容