时间戳

首页 > 解决方案 > 如何使用 react-to-print 库在 react js 中制作响应式 pdf？

html - 如何使用 react-to-print 库在 react js 中制作响应式 pdf？

问题描述

  [demo][1]

    [1]: https://codesandbox.io/s/react-to-print-rzdhd

我正在使用 react-to-print 库从 html 生成 pdf。但问题是，当我尝试在我的手机（小屏幕尺寸）中生成 pdf 时，它对我不起作用，但它适用于桌面（大屏幕尺寸）视图。

标签： htmlcssreactjsantdreact-to-print

解决方案

此软件包使用window.print()，它不适用于移动设备。您可以使用以下解决方法：

  class Example extends React.Component {
    printPDF(e) {
      return new Promise((resolve: any) => {
        e.preventDefault()
        var ua = navigator.userAgent.toLowerCase()
        var isAndroid = ua.indexOf('android') > -1 //&& ua.indexOf("mobile");
        if (isAndroid) {
          // https://developers.google.com/cloud-print/docs/gadget
          var gadget = new cloudprint.Gadget()

          gadget.openPrintDialog()
        } else {
          window.print()
        }
        resolve(true)
      })
    }

    render() {
      return (
        <div>
          <ReactToPrint
            trigger={() => <button>Print this out!</button>}
            print={e => this.printPDF(e)} // HANDLE PRINT FUNCTION
            content={() => this.componentRef}
          />
          <ComponentToPrint ref={el => (this.componentRef = el)} />
        </div>
      )
    }
  }

推荐阅读