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

Posted 2023-05-03

参考技术A 最近项目中有这样一个需求：

拿到这个需求，真时一头雾水。因为没有做过类似需求，不知从何下手。在查阅资料的过程中，发现有很多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的在线地址url转换为base64，但是不能显示。后来想明白了，只把url转换成base64格式是没有用的，需要把pdf的文件内容转换成base64才行。接下来就顺理成章，通过从后台获取到的pdf的url地址，再次请求获取到pdf文件。

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

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

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

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

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

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

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

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

使用未在 IOS 上显示的表单字段值在 React Native 中显示 PDF

【中文标题】使用未在 IOS 上显示的表单字段值在 React Native 中显示 PDF

【英文标题】：Display PDF in React Native using Forms Field value not showing on IOS

【发布时间】：2021-05-06 13:51:51

【问题描述】：

我正在尝试使用 react-native-pdf 在我们的应用程序上创建查看器并尝试使用 react-native-view-pdf，但我在 IOS 上的 PDF 表单字段存在问题，值/数据未显示。但是当该字段被聚焦/点击时，它将显示值/数据。在 Android 上，Forms 字段数据按预期显示。 IOS上的图片如下所示：

IOS PDF first load

IOS PDF Field tapped/focused

使用 react-native-pdf：

<View style= flex: 1 >
    <Pdf
        minScale=1.0
        maxScale=1.0
        scale=1.0
        spacing=0
        fitPolicy=2
        enablePaging=true
     // onTouchStart=(e) => 
     //     console.log('touchMove', e.nativeEvent);
     //     if (this.state.pdfEditMode) 
     //         this.setState( showDraggrable: false, cxValue: e.nativeEvent.locationX, cyValue: e.nativeEvent.locationY, xValue: e.nativeEvent.locationX, yValue: e.nativeEvent.locationY , () => 
     //             setTimeout(() => 
     //                 this.setState( showDraggrable: true, )
     //             , 0)
     //         )
     //     
     // 
        usePDFKit=false
        source= uri: `data:application/pdf;base64,$this.state.pdfBase64` 
        onLoadComplete=(numberOfPages, filePath,  width, height ) =>  this.setPageWH(width, height) 
        onPageChanged=(page, numberOfPages) => 
            console.log(`current page: $page`);
            this.setState( pageNumber: page );
        
        onError=(error) => 
            console.log(error);
        
        onPressLink=(uri) => 
            console.log(`Link presse: $uri`)
        
       // onPageSingleTap=(page, x, y) => 
       //     console.log(x, y)
       //     this.handleSingleTap(page, x, y);
       // 
         style=styles.pdf/> </View>

使用 react-native-view-pdf

<View style= flex: 1>     
    <PDFView
        fadeInDuration=250.0
        style=styles.pdf
        resource=this.state.pdfBase64
        resourceType='base64'
        onLoad=() => console.log(`PDF rendered from base64`)
        onError=(error) => console.log('Cannot render PDF', error)/> 
    </View>

库版本：

 "react": "16.6.3",
 "react-native": "0.58.1",
 "react-native-pdf": "^5.1.7",
 "react-native-view-pdf": "^0.11.0",

【参考方案1】：

这将在 IOS 模拟器上而不是在物理设备上。在物理设备上试了一下，填充的值都显示出来了。