本篇内容主要讲解“react不显示PDF生成信息如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react不显示PDF生成信息如何解决”吧! react不显示PDF生成信息的解决办法:1、从后台获取到的pdf的url地址,再请求获取到pdf文件;2、请求pdf文件时设置responseType为blob;3、将PDF文件转换为base64格式;4、以canvas来呈现PDF即可。解决react项目中PDF的显示与打印问题最近项目中有这样一个需求:页面中可以显示pdf不希望把整个页面打印下来,只打印显示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’ 引入到项目里。将
'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格式。
letreader=newFileReader() letfileParts=[] fileParts.push(this.props.pdfFile) letblob=newBlob(fileParts,{type:'application/pdf'}) if(blob){ reader.readAsDataURL(blob) } letbase64 letthat=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(), 虽然不能兼容所有浏览器,但是常见的高级浏览器都可以兼容,满足了我们的项目需求,这里我就没有继续深挖。到此,相信大家对“react不显示PDF生成信息如何解决”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
这篇文章主要介绍“ES6如何求数组反转”,在日常操作中,相信很多人在ES6如何求数组反转问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”免费云主机、域名ES6如何求数组反转”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! 在ES…