需要能够在 componentdidmount 上下载给定 BASE64 字符串的 PDF

Question

我正在尝试提供在给定 Base64 字符串的情况下下载 PDF 的功能。我可以使用 "react-native-view-pdf" 查看 PDF。只是无法弄清楚如何实际下载文件。这将需要为 android 和 ios 工作。

我已经尝试了各种论坛，但遗憾的是我没有任何进展。

注意：this.props.pdf 是 Base64 字符串。

尝试 1)

var path = RNFetchBlob.fs.dirs.DocumentDir + "/bill.pdf";
RNFetchBlob.fs.writeFile(path, this.props.pdf, "base64").then(res => {
  console.log("File : ", res);
});

尝试 2)

RNFetchBlob.config({
  fileCache : true,
  appendExt : 'pdf'
})
.fetch('GET',`${this.props.PDFLink}`)
.then((res) => {
  // open the document directly
  if(Platform.OS == "ios"){
  RNFetchBlob.ios.previewDocument(res.path())
  }
  else{
    RNFetchBlob
    .config({
        addAndroidDownloads : {
            useDownloadManager : true, // <-- this is the only thing required
            // Optional, override notification setting (default to true)
            notification : false,
            // Optional, but recommended since android DownloadManager will fail when
            // the url does not contains a file extension, by default the mime type will be text/plain
            mime : 'application/pdf',
            description : 'File downloaded by download manager.'
        }
    })
    .fetch('GET',`${this.props.PDFLink}`)
    .then((resp) => {
      // the path of downloaded file
      resp.path()
    })
  }
})
.catch(error => {
  console.error(error);
});

我期待看到当屏幕加载时，用户可以下载 PDF。我已经将它显示给用户，只是希望他们也能够下载该文件。

Answer 1

要下载文件，您可以使用 rn-fetch-blob 中的 RNFetchBlob.fs.writeFile api，如下所示。您还可以从其文档 https://github.com/joltup/rn-fetch-blob#user-content-file-stream

中参考其他文件流 api

RNFetchBlob
        .config({
            addAndroidDownloads : {
                useDownloadManager : true, // <-- this is the only thing required
                // Optional, override notification setting (default to true)
                notification : false,
                // Optional, but recommended since android DownloadManager will fail when
                // the url does not contains a file extension, by default the mime type will be text/plain
                mime : 'application/pdf',
                description : 'File downloaded by download manager.'
            }
        })
        .fetch('GET',`${this.props.PDFLink}`)
        .then((resp) => {
          // the path of downloaded file
          // resp.path()
          let base64Str = resp.data;
          let pdfLocation = RNFetchBlob.fs.dirs.DocumentDir + '/' + 'test.pdf';
          RNFetchBlob.fs.writeFile(pdfLocation, RNFetchBlob.base64.encode(base64Str), 'base64');

        })

希望对您有所帮助:)

需要能够在 componentdidmount 上下载给定 BASE64 字符串的 PDF

Need to be able to download a PDF given a BASE64 String upon componentdidmount

react-native

react-native-android

react-native-ios

react-native-fetch-blob