Question

我正在尝试使用angular从端点获取PDF文件

showPdf(rowData: Article) {

  let promise = new Promise((resolve, reject) => {
    let apiURL = this.apiUrl + "/api/articles/get/" + rowData.id;
    this.http.get(apiURL)
      .toPromise()
      .then(
        res => { // Success

          this.results = String(res);
          const bytes = this.results;
          var arrBuffer = this.base64ToArrayBuffer(bytes);
          var file = new Blob([arrBuffer], { type: "application/pdf" });
          const fileName = 'report_' + rowData.id + '.pdf';
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(file, fileName); // For IE browser
          }
          const linkElement = document.createElement('a');
          const url = URL.createObjectURL(file);
          linkElement.setAttribute('href', url);
          linkElement.setAttribute('download', fileName);
          const clickEvent = new MouseEvent('click', {
            'view': window,
            'bubbles': true,
            'cancelable': false
          });
          linkElement.dispatchEvent(clickEvent);
      resolve();
      },
      msg => { // Error
      reject(msg);
      }
    );
});

}

base64ToArrayBuffer(data) {
  var binaryString = window.atob(data);
  var binaryLen = binaryString.length;
  var bytes = new Uint8Array(binaryLen);
  for (var i = 0; i < binaryLen; i++) {
      var ascii = binaryString.charCodeAt(i);
      bytes[i] = ascii;
  }
  return bytes;
};

当我调用showPdf函数时，出现此错误：无法在“窗口”上执行“ atob”

错误错误：未捕获（承诺）：InvalidCharacterError：失败在“窗口”上执行“ atob”：要解码的字符串不是正确编码。错误：无法在“窗口”上执行“ atob”：要解码的字符串未正确编码。在articleListComponent.push ../ src / app / article-list / article-list.component.ts.ArticleListComponent.base64ToArrayBuffer （article-list.component.ts：130）在article-list.component.ts：103 在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke （zone.js：391）在Object.onInvoke（core.js：17299） ...

Answer 1

确保您提供了有效的base64字符串

例如，当您提供给run dataUri：atob

时，可能会出现此错误。

带有模拟的base64的示例工作片段

data:application/octet-stream;base64,...

const that = {
  apiUrl: '',
  http: {
    get: () => rxjs.from(
      fetch("https://cors-anywhere.herokuapp.com/https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf")
      .then(response => response.blob())
      .then(blob => blobtoBase64(blob)).then(dataUri => {
        const [meta, data] = dataUri.split("base64,")
        return data;
      }))
  },
  results: null,
  base64ToArrayBuffer
}

function blobtoBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
      const base64data = reader.result;
      resolve(base64data);
    }
  });
}

async function showPdf(rowData) {
  let apiURL = that.apiUrl + "/api/articles/get/" + rowData.id;

  const res = await that.http.get(apiURL)
    .toPromise()

  that.results = res;
  const bytes = that.results;

  const arrBuffer = that.base64ToArrayBuffer(bytes);
  const file = new Blob([arrBuffer], {
    type: "application/pdf"
  });
  const fileName = 'report_' + rowData.id + '.pdf';
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(file, fileName); // For IE browser
  }
  const linkElement = document.createElement('a');
  const url = URL.createObjectURL(file);
  linkElement.setAttribute('href', url);
  linkElement.setAttribute('download', fileName);
  const clickEvent = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': false
  });
  linkElement.dispatchEvent(clickEvent);


}

function base64ToArrayBuffer(data) {
  const binaryString = window.atob(data);
  const binaryLen = binaryString.length;
  const bytes = new Uint8Array(binaryLen);
  for (let i = 0; i < binaryLen; i++) {
    const ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
  }
  return bytes;
};

showPdf({
  id: '1'
});

InvalidCharacterError：无法在“窗口” PDF文件上执行“ atob”

1 个答案: