如何使用ReactJS在浏览器中链接下载为PDF格式_Flutter，在浏览器中打开PDF格式的超链接_如何在浏览器中打开pdf而不是在webapi中下载 - 腾讯云开发者社区

基础概念

ReactJS 是一个用于构建用户界面的 JavaScript 库。它允许开发者通过组件化的方式来构建复杂的用户界面。PDF 是一种便携式文档格式，广泛用于文档的存储和传输。

类型

React 组件：用于构建用户界面的代码片段。
PDF 生成库：用于将 HTML 或其他内容转换为 PDF 格式的工具。

应用场景

报告生成：将动态生成的数据和图表转换为 PDF 格式进行下载。
表单提交：将填写的表单数据转换为 PDF 并提供下载链接。

实现方法

我们可以使用 react-pdf 库来生成 PDF 文件，并通过 file-saver 库来实现文件下载。

安装依赖

npm install @react-pdf/renderer file-saver

示例代码

import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import { saveAs } from 'file-saver';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const MyDocument = ({ content }) => (
  <Document>
    <Page pageNumber={1}>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </Page>
  </Document>
);

const DownloadButton = ({ content }) => {
  const [numPages, setNumPages] = React.useState(null);

  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  const handleDownload = () => {
    const pdf = document.createElement('a');
    pdf.href = '/api/generate-pdf'; // 假设后端提供了一个生成 PDF 的 API
    pdf.download = 'document.pdf';
    document.body.appendChild(pdf);
    pdf.click();
    document.body.removeChild(pdf);
  };

  return (
    <div>
      <Document
        file="/api/generate-pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={1} />
      </Document>
      <button onClick={handleDownload}>下载 PDF</button>
    </div>
  );
};

const App = () => {
  const content = '<h1>Hello World</h1><p>This is a sample content.</p>';

  return (
    <div>
      <MyDocument content={content} />
      <DownloadButton content={content} />
    </div>
  );
};

export default App;