REECT：下载带有道具和React-PDF的PDF文件？

Question

我想在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是否有其他更简单的方法，或者我使用的是错误的，非常感谢您

Answer 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()
  })
})

}

Answer 2

REACT：使用Props和React-PDF下载PDF文件？

创建一个文档组件并通过以下方式通过Props

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

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

使用React-PDF pdfDownloadlink 为您的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>