如何将 pdf 从 api 响应保存到 react native 中的文件系统？

问题描述

我从 api 接收到一个 blob，我想将它作为 pdf 文档保存到文件系统中。但是在保存时我在我的手机中收到了一个大小为 0B 的文件

代码

export const getParkingReciept = (bookindId) => {
   
     return async function (dispatch,getState) {

      try {
    const TOKEN = getState().Auth.token;

    const formdata = new FormData();
  formdata.append("booking_id",bookindId);


    RNFetchBlob.fetch(
        'POST',`${BASE_URL}parking-space/booking/receipt`,{ 
            'Accept': 'application/json','Authorization': `Bearer ${TOKEN}`,'Content-Type': 'multipart/form-data'
        },[

            { name : 'booking_id',data: bookindId.toString()}
          ]
    )
    .then(
        response => {
            console.log("response is ",response);
        response.blob().then(res=>console.log(checkPermission(res,response.taskId)));
       console.log("pdf base64 is ",response.base64());

 }
    ).catch((error) => {
        // error handling
        console.log("Error",error)
    }
    
    
    );
    
}catch (e) {
    if (e.response) {
        console.log("error response is ",e.response);
    } else if (e.request) {
        console.log(e.request);
    } else {
        console.log('Error',e);
    }
    console.log(e.config);
}
}    
const checkPermission=async (file,name) => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,{
          title: "Cool Photo App Camera Permission",message:
            "Cool Photo App needs access to your camera " +
            "so you can take awesome pictures.",buttonNeutral: "Ask Me Later",buttonNegative: "Cancel",buttonPositive: "OK"
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("You can write to external storage");
        var path = RNFS.DownloadDirectoryPath + '/'+name+".pdf";
console.log("pdf being written is ",file);

        RNFS.writeFile(path,file,'utf8')
        .then((success) => {
          console.log('FILE WRITTEN!');
          RNFetchBlob.fs.scanFile([ { path : path,mime : "application/pdf" } ])
          //     .then(() => {
          //       console.log("scan file success")
          //     })
          //     .catch((err) => {
          //       console.log("scan file error")
          //     })
        })
        .catch((err) => {
          console.log(err.message);
        });
      } else {
        console.log("permission denied");
      }
    } catch (err) {
      console.warn(err);
    }
  };

我从 fetch 得到的回应是

在调用 blob() 响应函数时，我得到的是

那里有类型 Application/pdf ，但在 base 64 字符串中不以 JVBERi 开头，它以一些 SFRUU 开头，这是一个有效的 pdf 文件吗？。我错过了什么？我在这里做错了什么？

解决方法

这个答案解决了您的问题，详细解释了如何使用 rn fetch blob 从网络请求下载文件

https://stackoverflow.com/a/56890611/7324484

一旦你下载了文件或者你可以直接使用

打开pdf

https://www.npmjs.com/package/react-native-pdf