Question

当我按下按钮时，我必须让用户下载pdf文件，我发现我必须使用rn-fetch-blob而不是react-native-fetch-blob。在文档中有以下代码：

const { config, fs } = RNFetchBlob
let DownloadDir = fs.dirs.DownloadDir // this is the Downloads directory.
let options = {
fileCache: true,
addAndroidDownloads : {
useDownloadManager : true, //uses the device's native download manager.
notification : true,
title : "Notification Title", // Title of download notification.
path: DownloadDir + "/me_"+ '.' + extension, // this is the path where your download file will be in
description : 'Downloading file.'
}
}
config(options)
.fetch('GET',"https://whatever_url_u _want/)
.then((res) => {
//console.log("Success");
})
.catch((err) => {console.log('error')}) // To execute when download cancelled and other errors
}

我不知道该怎么办！如何在TouchableOpacity onPress道具中使用它？请有人可以提供详细的示例

PS。我使用POST方法调用API，并且收到PDF文件的链接。我认为

I have to set this link like that
    config(options)
    .fetch('GET',this.state.data.link)

Answer 1

最新的 ios/android 解决方案

按照 mosabbir tuhin 的回答，然后使用我的函数 actualDownload() 和 permissionFunc() 使 pdf 也可以在 ios 上运行。

const permissionFunc = async () => {
    if (Platform.OS == 'ios') {
        actualDownload();
    } else {
        if (downloaded) {
            try {
                const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
                if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                    actualDownload();
                } else {
                    showSnackbar('You need to give storage permission to download the file');
                }
            } catch (err) {
                console.warn(err);
            }
        }
        else {
            showSnackbar('File is already downloaded.');
        }
    }
}

const actualDownload = () => {
    const { dirs } = RNFetchBlob.fs;
    const dirToSave = Platform.OS == 'ios' ? dirs.DocumentDir : dirs.DownloadDir
    const configfb = {
        fileCache: true,
        useDownloadManager: true,
        notification: true,
        mediaScannable: true,
        title: pdfInfo.pdf,
        path: `${dirToSave}/${pdfInfo.pdf}`,
    }
    const configOptions = Platform.select({
        ios: {
            fileCache: configfb.fileCache,
            title: configfb.title,
            path: configfb.path,
            appendExt: 'pdf',
        },
        android: configfb,
    });

    console.log('The file saved to 23233', configfb, dirs);

    RNFetchBlob.config(configOptions)
        .fetch('GET', `https://aquatherm.s3.ap-south-1.amazonaws.com/pdfs/${pdfInfo.pdf}`, {})
        .then((res) => {
            if (Platform.OS === "ios") {
                RNFetchBlob.fs.writeFile(configfb.path, res.data, 'base64');
                RNFetchBlob.ios.previewDocument(configfb.path);
            }
            setisdownloaded(false)
            if (Platform.OS == 'android') {
                showSnackbar('File downloaded');
            }
            console.log('The file saved to ', res);
        })
        .catch((e) => {
            setisdownloaded(true)
            showSnackbar(e.message);
            console.log('The file saved to ERROR', e.message)
        });
}

Answer 2

在 AndroidManifest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />

要使用downloadmanager，请在 AndroidManifest.xml

<intent-filter>
     <action android:name="android.intent.action.MAIN" />
     <category android:name="android.intent.category.LAUNCHER" />
     <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>                          
</intent-filter>

现在在组件中

downloadFile = () => {
  const { dirs } = RNFetchBlob.fs;
  RNFetchBlob.config({
    fileCache: true,
    addAndroidDownloads: {
    useDownloadManager: true,
    notification: true,
    mediaScannable: true,
    title: `test.pdf`,
    path: `${dirs.DownloadDir}/test.pdf`,
    },
  })
    .fetch('GET', 'http://www.africau.edu/images/default/sample.pdf', {})
    .then((res) => {
      console.log('The file saved to ', res.path());
    })
    .catch((e) => {
      console.log(e)
    });
}

render(){
  <TouchableOpacity onPress={this.downloadFile}>
    <Text>Download!!!</Text>
  </TouchableOpacity>
}

注意：您需要在运行时请求android 6或更高版本的存储权限

Answer 3

我尝试了以下代码：

  _downloadFile = () => {
    const { config, fs } = RNFetchBlob
    let DownloadDir = fs.dirs.DownloadDir
    let options = {
    fileCache: true,
    addAndroidDownloads : {
    useDownloadManager : true,
    notification : true,
    title : "MY FILE Title",
    path: DownloadDir + "/me_"+ '.' + 'pdf',
    description : 'Downloading file.'
    }
    }
    RNFetchBlob.config(options)
    .fetch('GET','http://www.pdf995.com/samples/pdf.pdf')
    .then((res) => {
    console.warn("Success");
    })
    .catch((err) => {console.log('error')})
 };

当我单击按钮时，我收到一条通知，显示“我的文件标题”作为标题，并显示以下消息：“下载失败”

React Native：单击按钮下载带有rn-fetch-blob的pdf文件

3 个答案: