Question

我指的是这个https://github.com/joltup/rn-fetch-blob#download-to-storage-directly，我已经转换了从API端点接收到的JSON响应，现在我想将其转换为CSV文件并下载该怎么办？当用户点击下载图标时，用户必须能够将该JSON响应下载为CSV文件。

要将JSON响应转换为CSV格式，我使用了以下代码来分隔每个字段。（另请参见屏幕截图）

代码：

convertToCSV = (stm_leadsitevisits, projectName) => {
        // console.log("convert CSV Inside sitevisits: ",stm_leadsitevisits);

        let obj = [['Sr no','Name', 'Phone', 'Email', 'Project', 'Visited at', 'Attended by', 'Source', 'Feedback']];
        let data = stm_leadsitevisits;
        let csvRow = [];

        for(let item = 0; item<data.length; item++){
            obj.push([item, data[item].name, data[item].phone, data[item].email, projectName, data[item].created_time, 
                data[item].user.name, data[item].source, data[item].feedback ])
        }

        console.log("New data: ", obj);
    }

Answer 1

据我了解，该库将文件用作高速缓存而不是持久存储。我曾经使用两个库从磁盘读取json文件，但我猜相反（按您的情况）也可以帮助您解决这一问题。

https://github.com/itinance/react-native-fs

https://github.com/luisfuertes/react-native-file-picker

这是我用来使用RNFS和RNFP打开文件的代码，只是为了给您一个起点。

pickFile = () => {
    // (1) Browse for file
    DocumentPicker.show({
        filetype: [DocumentPickerUtil.allFiles()],
    }, (error, file) => {
        // (2) Copy file to accessible path
        let destPath = RNFS.DocumentDirectoryPath + '/' + file.fileName;
        RNFS.copyFile(file.uri, destPath)
            .then((success) => {
                console.log('file copied!');
                // (3) Read file content and parse to JSON
                RNFS.readFile(RNFS.DocumentDirectoryPath + '/' + file.fileName, 'utf8')
                    .then((contents) => {
                        let json = JSON.parse(contents);
                        // (4) dispatch reducer
                        this.props.addJsonFile(json);
                        ToastAndroid.show('Imported ' + file.fileName, ToastAndroid.SHORT);
                    })
                    .catch((err) => {
                        console.log('Error reading file: ' + err.message);
                    });
            })
            .catch((err) => {
                console.log('Error copying file: ' + err.message);
            });

    });
};

这是来自RNFS github页面的代码，用于写入文件：

var path = RNFS.DocumentDirectoryPath + '/test.txt';

// write the file
RNFS.writeFile(path, 'Lorem ipsum dolor sit amet', 'utf8')
  .then((success) => {
    console.log('FILE WRITTEN!');
  })
  .catch((err) => {
    console.log(err.message);
  });

只需在您引用的github中找到此部分：

let dirs = RNFetchBlob.fs.dirs
RNFetchBlob
.config({
  // response data will be saved to this path if it has access right.
  path : dirs.DocumentDir + '/path-to-file.anything'
})
.fetch('GET', 'http://www.example.com/file/example.zip', {
  //some headers ..
})
.then((res) => {
  // the path should be dirs.DocumentDir + 'path-to-file.anything'
  console.log('The file saved to ', res.path())
})

我想这不能解决您的问题，因为保存是在诺言解决后进行的，您需要先将JSON转换为CSV，然后再保存。在这种情况下，我建议使用RNFS或向RN-fetch-blob添加功能请求以支持此功能。

欢呼

如何在React Native中下载文件？

1 个答案: