时间戳

首页 > 解决方案 > 使用 URL.createObjectURL 重建 PDF 后，PDF 已损坏

javascript - 使用 URL.createObjectURL 重建 PDF 后，PDF 已损坏

问题描述

我正在尝试从服务器传递 PDF 文件并将其显示在浏览器中，但输出已损坏。

var blob = atob(data.Package);

console.log(blob);

var file = new Blob([blob], { type: "application/pdf" });

const fileURL = URL.createObjectURL(file);

window.open(fileURL);

控制台日志输出的内容似乎是正确的 PDF（只是输出的开头）：

在此处输入图像描述

我在传输之前将 PDF 的副本保存在服务器上，以确保它没有损坏并且可以正常工作。

用 URL.createObjectURL(file) 构造的 URL 似乎很短：blob: http://localhost:61631/ad749684-2992-4311-8b17-f382a7c687be

服务器端代码：

Object doc = Convert.ToBase64String(_Document.DocumentStream.ToArray());
JObject response = new JObject(new JProperty("Package", JObject.FromObject(doc)));
return new AspResponse<Object>(response);

标签： javascript

解决方案

看起来问题是因为您需要将 PDF 数据转换为实际的字节数组，然后将其传递给Blob构造函数。试试这个：

function convertToByteArray(input) {
  var sliceSize = 512;
  var bytes = [];

  for (var offset = 0; offset < input.length; offset += sliceSize) {
    var slice = input.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);

    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);

    bytes.push(byteArray);
  }

  return bytes;
}

var blob = atob(data.Package);

console.log(blob);

var file = new Blob(convertToByteArray(blob), { type: "application/pdf" });

const fileURL = URL.createObjectURL(file);

window.open(fileURL);

推荐阅读