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>
}

在React中显示二进制PDF

1 个答案: