React：使用 props 和 react-pdf 下载 pdf 文件 onClick？答案

【问题标题】：React: download a pdf file onClick with props and react-pdf?React：使用 props 和 react-pdf 下载 pdf 文件 onClick？
【发布时间】：2022-11-30 15:47:08
【问题描述】：

我想从 UI 生成基于 props 的 pdf 并下载它。
单击按钮后，道具数据将从 API 中获取
有这样的文件。


const MyDoc = ({ text = "default" }) => {
  return (
    <Document>
      <Page>
        <Text>dsdsds{text}</Text>
      </Page>
    </Document>
  );
};

使用 PDFViewer，可以更新或刷新查看器吗？


const [text, setText] = useState("state");

  function change(){
    setText("updateText")
  }

  return (
    <>
      <PDFViewer width="100%" height="850px">
        <MyDoc text={{text}}/>
      </PDFViewer>
      <button onClick={change}>change props</button>
    </>
  );
};

使用BlobProvider，可以更新或刷新URL吗？


const [text, setText] = useState("state");

  function change(){
    setText("updateText")
  }

  return (
    <>
      <BlobProvider
       document={<MyDoc text={{text}}/>} >
              {({ url }) => (
                <a
                  href={url}
                  target="_blank"
                  rel="noreferrer noopener"
                >
                  <b>Go to PDF</b>
                </a>
              )}
       </BlobProvider>
       <button onClick={change}>change props</button>
    </>
  );
};

我认为使用 PDFDownloadLink 是不可能的，但使用 pdf 方法或 usePDF 钩子都不可能

const blob = pdf(MyDoc).toBlob();
//how can I add props to MyDoc

const [instance, updateInstance] = usePDF({ document: MyDoc });
//how can I add props to MyDoc

  function change(){
    updateInstance({ document: MyDoc });
  }


  if (instance.loading) return <div>Loading ...</div>;

  if (instance.error) return <div>Something went wrong: {error}</div>;

  return (
    <>
     <a href={instance.url} download="test.pdf">
      Download
     </a>
     <button onClick={change}>change props</button>
    </>
  );

或者有没有其他更简单的 react-pdf 方法，或者我使用的 react 错误，非常感谢

【问题讨论】：

标签： javascript reactjs react-pdf

【解决方案1】：

使用fetch api实现如下

  const onButtonClick = () => {
fetch(decodeURI(`url`)).then((response) => {
  response.blob().then((blob) => {
    const fileURL = window.URL.createObjectURL(blob)
    console.log(fileURL)
    let alink = document.createElement('a')
    alink.href = fileURL
    alink.download = 'pdf_title'
    alink.click()
  })
})

}

【讨论】：

如何将 fetch 与 react-pdf 一起使用？pdf 是在客户端使用数据库数据构建的。

【解决方案2】：

React：使用 props 和 react-pdf 下载 pdf 文件 onClick？

创建一个文档组件并传递如下道具

const [data, setData] = useState([])

    const MyDocument = () => (
  <Document>
    <Page size="A4">
      <View >
        <Text>{data.text}</Text>
      </View>
    </Page>
  </Document>
);

使用反应-pdfPDF下载链接为上面的 pdf 创建下载链接

<PDFDownloadLink
    document={
        <Document
              author=''
              keywords=''
              subject=''
              title=''
            >
              <MyDocument size='A4' />
            </Document>
          }
          fileName='mypdf.pdf'
        >
          {({ blob, url, loading, error }) =>
            loading ? 'Loading document...' : 'Download now!'
          }
        </PDFDownloadLink>

【讨论】：