Реакция Как напечатать PDF-файл в представлении компонентов

Question

Я хотел бы узнать, как я могу напечатать документ PDF, визуализированный внутри компонента React.В настоящее время мой обработчик событий не запускается соответствующим образом, чтобы включить печать.

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()?

У меня есть песочница с кодом где вы можете увидеть ошибку в деталях при стрельбе 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

Надеюсь, это поможет вам