Question

我想学习如何打印在React组件中渲染的PDF文档。目前，我的事件处理程序未相应触发以启用打印。

import React, { Component } from "react";

const pdfFile =
  "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";

export default class PDFViewer extends Component {
  handlePrint = () => {
    // is getElementById an anti pattern even if I'm not modyfying the DOM?
    const node = document.getElementById("print-file");
    node.contentWindow.focus();
    node.contentWindow.print();
  };

  render() {
    return (
      <>
        <h2>PDF Viewer Component</h2>
        <object data={pdfFile} type="application/pdf">
          <iframe
            title="pdf document"
            id="print-file"
            src={`https://docs.google.com/viewer?url=${pdfFile}&embedded=true`}
          />
        </object>
        <button onClick={this.handlePrint}>Print</button>
      </>
    );
  }
}

我在handlePrint()内做错了吗？

我有一个code sandbox，在您触发handlePrint()时可以看到错误的详细信息

Answer 1

您不能从其他域打印iframe或窗口，@ Trevor Reid怎么说，您应该在前端跨域策略以及服务器中进行定义。

要提供一些解决方案，您可以打开一个通常会加载PDF和导航器的弹出窗口，或者打开可以下载或直接下载文件的pdf。

我可以建议的代码是下一个：

handlePrint = (event) => {
  event.preventDefault();
  window.open(pdfFile, "PRINT", "height=400,width=600");
};

另外，更难实现的是使用以下库： https://github.com/mozilla/pdf.js/blob/master/web/pdf_print_service.js

希望对您有帮助

React如何在组件视图中打印PDF文件

1 个答案: