最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Not able to download PDF in safari browser on iphone or ipad pro ios12 - Stack Overflow

programmeradmin1浏览0评论

I have PDF download functionality in my web app. It is working fine with all the browsers and iOS11 but it's not working on safari browser and ios12 on mobile or iod pro. I am getting below error - WebKitBlobResource error 1

export const downloadPDF = (downloadLink, fileName, trackId, productId, historyId) => {
  return (dispatch) => {
    return request.doGetAuth(downloadLink).then(response => {
      let contentType = response.headers.get('content-type');
      if (_.includes(contentType, 'application/json')) {
        return response.json();
      } else {
        return response.blob();
      }
    }).then(blobby => {
      if (!blobby.message) {
        const blob = new Blob([blobby], {
          type: 'application/pdf'
        });
        if (isIos()) {
          if (!isCriOs()) {
            // For ios 
            let url = window.URL.createObjectURL(blob);
            dispatch(downloadReadyAction(url, fileName));
          } else {
            // if chrome
            let reader = new FileReader();
            reader.onload = function(e) {
              dispatch(downloadReadyAction(reader.result, fileName));
            }
            reader.readAsDataURL(blob);
          }
        } else {
          FileSaver.saveAs(blob, fileName);
        }
      }
    }).catch(err => {
      console.log('Problem downloading pdf from server ' + err)
    })
  }
}

I have PDF download functionality in my web app. It is working fine with all the browsers and iOS11 but it's not working on safari browser and ios12 on mobile or iod pro. I am getting below error - WebKitBlobResource error 1

export const downloadPDF = (downloadLink, fileName, trackId, productId, historyId) => {
  return (dispatch) => {
    return request.doGetAuth(downloadLink).then(response => {
      let contentType = response.headers.get('content-type');
      if (_.includes(contentType, 'application/json')) {
        return response.json();
      } else {
        return response.blob();
      }
    }).then(blobby => {
      if (!blobby.message) {
        const blob = new Blob([blobby], {
          type: 'application/pdf'
        });
        if (isIos()) {
          if (!isCriOs()) {
            // For ios 
            let url = window.URL.createObjectURL(blob);
            dispatch(downloadReadyAction(url, fileName));
          } else {
            // if chrome
            let reader = new FileReader();
            reader.onload = function(e) {
              dispatch(downloadReadyAction(reader.result, fileName));
            }
            reader.readAsDataURL(blob);
          }
        } else {
          FileSaver.saveAs(blob, fileName);
        }
      }
    }).catch(err => {
      console.log('Problem downloading pdf from server ' + err)
    })
  }
}
Share Improve this question edited Oct 3, 2018 at 10:11 Kalashir asked Oct 3, 2018 at 7:14 KalashirKalashir 1,1274 gold badges16 silver badges41 bronze badges 1
  • I was confused by the "isIos" function that i thought for a second was a native javascript function...So more information here on how to create your own isIos function : stackoverflow./questions/9038625/detect-if-device-is-ios – Lal Commented Sep 1, 2022 at 10:35
Add a ment  | 

1 Answer 1

Reset to default 5

When we open pdf in new url tab , The file doesn't exist but its only cache stored inside the browser. So when we generate the blob and redirect to current tab to point to the generated blob url, We lose the cache. So opening url in new window helps it.

   let url = window.URL.createObjectURL(blob);
   window.open(url, "_blank");
发布评论

评论列表(0)

  1. 暂无评论