如何使用 React Native 下载文件?
How to download a file with React Native?
我正在使用 React Native 为 Android 和 iOS 构建一个应用程序。我试图让用户在单击按钮时下载 PDF 文件。
- react-native-file-download不支持Android
当我触发 downloadFile 时 - react-native-fs 什么都不做(通知栏上没有任何显示),之后我无法找到该文件。我将
android.permission.WRITE_EXTERNAL_STORAGE
添加到 Android 清单文件。我仔细检查了我要下载的文件是否存在(如果不存在,库会抛出错误)
我没有找到解决此问题的其他方法。我找到了用于查看 PDF 的库,但我想让用户下载 PDF。
一个小时前刚刚实现了下载功能:p
按照以下步骤操作:
a) npm 安装 rn-fetch-blob
b) 按照安装说明进行操作。
b2) 如果你想在不使用 rnpm 的情况下手动安装软件包,请转到他们的 wiki.
c) 最后,这就是我如何在我的应用程序中下载文件:
const { config, fs } = RNFetchBlob
let PictureDir = fs.dirs.PictureDir // this is the pictures directory. You can check the available directories in the wiki.
let options = {
fileCache: true,
addAndroidDownloads : {
useDownloadManager : true, // setting it to true will use the device's native download manager and will be shown in the notification bar.
notification : false,
path: PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2), // this is the path where your downloaded file will live in
description : 'Downloading image.'
}
}
config(options).fetch('GET', "http://www.example.com/example.pdf").then((res) => {
// do some magic here
})
如果您使用的是 Expo,react-native-fetch-blob
将无法使用。使用 FileSystem
.
这是一个工作示例:
const { uri: localUri } = await FileSystem.downloadAsync(remoteUri, FileSystem.documentDirectory + 'name.ext');
现在您 localUri
有了下载文件的路径。随意设置您自己的文件名而不是 name.ext
.
我遇到了同样的问题,使用 Expo WebBrowser 模块可以正常工作
// install module
npm install react-native-webview
// import the module
import * as WebBrowser from 'expo-web-browser';
// then in your function you can call this function
await WebBrowser.openBrowserAsync(file_ur);
它将打开文件预览,然后用户可以使用共享按钮下载。
我遵循了 Jonathan Simonney 的解决方案,上面关于这个 post。但我不得不稍微改变一下:
const { config, fs } = RNFetchBlob;
const date = new Date();
const { DownloadDir } = fs.dirs; // You can check the available directories in the wiki.
const options = {
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true, // true will use native manager and be shown on notification bar.
notification: true,
path: `${DownloadDir}/me_${Math.floor(date.getTime() + date.getSeconds() / 2)}.pdf`,
description: 'Downloading.',
},
};
config(options).fetch('GET', 'http://www.africau.edu/images/default/sample.pdf').then((res) => {
console.log('do some magic in here');
});
GetItem_downloadbtn = (item, itemname) => {
console.log("fiel url comiugn jdd " + item);
console.log("item name checkoing " + itemname);
const android = RNFetchBlob.android;
const filename = itemname;
const filepath = RNFetchBlob.fs.dirs.DownloadDir + '/foldernamae/' + filename;
const downloadAppUrl = item;
RNFetchBlob.config({
addAndroidDownloads: {
useDownloadManager: true,
title: 'great, download success',
description:'an apk that will be download',
mime: 'application/vnd.android.package-archive',
// mime: 'image/jpeg',
// mediaScannable: true,
notification: true,
path: filepath
}
})
.fetch('GET', downloadAppUrl)
.then((res) => {
// console.log('res.path ', res.path());
alert('res.path ', res.path());
android.actionViewIntent(res.path(), 'application/vnd.android.package-archive');
})
.catch((err) => {
alert('download error, err is', JSON.stringify(err));
});
}
我正在使用 React Native 为 Android 和 iOS 构建一个应用程序。我试图让用户在单击按钮时下载 PDF 文件。
- react-native-file-download不支持Android 当我触发 downloadFile 时
- react-native-fs 什么都不做(通知栏上没有任何显示),之后我无法找到该文件。我将
android.permission.WRITE_EXTERNAL_STORAGE
添加到 Android 清单文件。我仔细检查了我要下载的文件是否存在(如果不存在,库会抛出错误)
我没有找到解决此问题的其他方法。我找到了用于查看 PDF 的库,但我想让用户下载 PDF。
一个小时前刚刚实现了下载功能:p
按照以下步骤操作:
a) npm 安装 rn-fetch-blob
b) 按照安装说明进行操作。
b2) 如果你想在不使用 rnpm 的情况下手动安装软件包,请转到他们的 wiki.
c) 最后,这就是我如何在我的应用程序中下载文件:
const { config, fs } = RNFetchBlob
let PictureDir = fs.dirs.PictureDir // this is the pictures directory. You can check the available directories in the wiki.
let options = {
fileCache: true,
addAndroidDownloads : {
useDownloadManager : true, // setting it to true will use the device's native download manager and will be shown in the notification bar.
notification : false,
path: PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2), // this is the path where your downloaded file will live in
description : 'Downloading image.'
}
}
config(options).fetch('GET', "http://www.example.com/example.pdf").then((res) => {
// do some magic here
})
如果您使用的是 Expo,react-native-fetch-blob
将无法使用。使用 FileSystem
.
这是一个工作示例:
const { uri: localUri } = await FileSystem.downloadAsync(remoteUri, FileSystem.documentDirectory + 'name.ext');
现在您 localUri
有了下载文件的路径。随意设置您自己的文件名而不是 name.ext
.
我遇到了同样的问题,使用 Expo WebBrowser 模块可以正常工作
// install module
npm install react-native-webview
// import the module
import * as WebBrowser from 'expo-web-browser';
// then in your function you can call this function
await WebBrowser.openBrowserAsync(file_ur);
它将打开文件预览,然后用户可以使用共享按钮下载。
我遵循了 Jonathan Simonney 的解决方案,上面关于这个 post。但我不得不稍微改变一下:
const { config, fs } = RNFetchBlob;
const date = new Date();
const { DownloadDir } = fs.dirs; // You can check the available directories in the wiki.
const options = {
fileCache: true,
addAndroidDownloads: {
useDownloadManager: true, // true will use native manager and be shown on notification bar.
notification: true,
path: `${DownloadDir}/me_${Math.floor(date.getTime() + date.getSeconds() / 2)}.pdf`,
description: 'Downloading.',
},
};
config(options).fetch('GET', 'http://www.africau.edu/images/default/sample.pdf').then((res) => {
console.log('do some magic in here');
});
GetItem_downloadbtn = (item, itemname) => {
console.log("fiel url comiugn jdd " + item);
console.log("item name checkoing " + itemname);
const android = RNFetchBlob.android;
const filename = itemname;
const filepath = RNFetchBlob.fs.dirs.DownloadDir + '/foldernamae/' + filename;
const downloadAppUrl = item;
RNFetchBlob.config({
addAndroidDownloads: {
useDownloadManager: true,
title: 'great, download success',
description:'an apk that will be download',
mime: 'application/vnd.android.package-archive',
// mime: 'image/jpeg',
// mediaScannable: true,
notification: true,
path: filepath
}
})
.fetch('GET', downloadAppUrl)
.then((res) => {
// console.log('res.path ', res.path());
alert('res.path ', res.path());
android.actionViewIntent(res.path(), 'application/vnd.android.package-archive');
})
.catch((err) => {
alert('download error, err is', JSON.stringify(err));
});
}