Question

我的反应有问题。我有一个嵌入pdf和下载按钮的程序。我想点击下载按钮的pdf。

相反，我的程序将我重定向到您下载pdf的另一页，这意味着它存在该应用程序，但我只想留在同一应用程序中并在我的应用程序中下载pdf。

有没有可以使用的插件

请在下面找到我的代码：

<div>
    <object data={this.props.file} type='application/pdf'>
        <embed src={this.props.file} type='application/pdf' />
    </object>
    {
     this.props.author ==='bot' ?
        <a href={this.props.file} download={this.props.file}>
            <input alt='download' type={'image'} src={download} />
        </a>
     :
        ''
    }
 </div>

Answer 1

尝试使用fetch调用以下方法，并使用FileReader对象保存文件

fetch(this.props.file, {
    method: "GET",
    headers: {
      Accept: "application/pdf",
      "Content-Type": "application/pdf",
    },

  }).then(response => response.blob())
    .then(response => {
  var blob=response
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function() {
  var base64data = reader.result;

      window.open(base64data);

  }
})
.catch(error => {
  console.error(error);
});

Answer 2

您可以使用基本HTML进行处理。您不需要任何插件。我更喜欢使用reactstrap而不是bootstrap。

import { Row, Col } from "reactstrap";
           <Row>
            {/* off set will middle the col */}
            <Col md={{ size: 8, offset: 2 }}>
              <div >
                <a
                  //this will save the file as "your_cv.pdf"
                  download="your_cv.pdf"
                  //put the path of your pdf file
                  href="/static/resume.pdf"
                  //reactstrap classes. add green button
                  className="btn btn-success"
                >
                  Download
                </a>
              </div>
              <iframe
                style={{ width: "100%", height: "800px" }}
                src="/static/resume.pdf"
              >
                {" "}
              </iframe>
            </Col>
          </Row>

React PDF onclick下载

2 个答案: