在 React 中显示二进制 PDF

Question

有没有一种方法可以获取 pdf 文档的二进制文件并显示 pdf？我看过react-pdf，但它似乎不支持二进制。我也研究过使用 iframe，但同样，我只能使用 base64 ......如果有办法将二进制文件转换为 base64，我仍然可以在 iframe 中显示它，但我有点输在这里。

Answer 1

我将分享我的工作示例。我在这里使用 base64 显示，所以您必须自己将二进制文件转换为 base64。

getDoc = binary => e => {
    if (binary != null) {
      var contentType = "application/pdf";

      this.setState({
        doc: "data:" + contentType + ";base64," + binary
      });
    } else {
      this.setState({
        doc: ""
      });
    }
  };

显示模态的按钮

render() {
<button
            className="btn btn-warning btn-sm"
            href="#"
            role="button"
            data-toggle="modal"
            data-target="#previewModal"
            onClick={this.getDoc(your_file)}
>

使用嵌入显示文件

<div
        id="previewModal"
        className="modal fade"
        role="dialog"
      >
        <div className="modal-dialog modal-lg">
          {/* <!-- Modal content--> */}
          <div className="modal-content">
            <div className="modal-header">
              <h4 className="modal-title">Doc</h4>
              <button type="button" className="close" data-dismiss="modal">
                &times;
              </button>
            </div>
            <div className="modal-body">
              <embed
                src={this.state.doc}
                id="displayFile"
                alt="your image"
                width="100%"
                height="99%"
                style={{ borderStyle: "solid" }}
                type="application/pdf"
              />
            </div>
          </div>
        </div>
      </div>
}