如何将 PDF 加载到 blob 中以便上传？答案

【问题标题】：How to load a PDF into a blob so it can be uploaded?如何将 PDF 加载到 blob 中以便上传？
【发布时间】：2014-11-03 06:03:15
【问题描述】：

我正在开发一个需要将文件传递给 PLUpload 实例的放置侦听器的测试框架。我需要创建 blob 对象以在拖放事件上生成的排序的数据传输对象内部传递。我让它适用于文本文件和图像文件。我想添加对 PDF 的支持，但似乎在检索响应后我无法立即获得编码。响应以文本形式返回，因为我正在使用 Sahi 检索它以避免跨域问题。

简而言之：我收到的字符串是 UTF-8 编码的，因此内容看起来就像您使用文本编辑器打开了 PDF。我想知道如何将其转换回创建 blob 所需的格式，以便在文件上传后一切看起来都正常。

我需要执行哪些步骤才能将 UTF-8 字符串转换为正确的 blob 对象？（是的，我知道我可以提交 XHR 请求并更改 responseType 属性并且（也许）更接近，但是由于 Sahi 操作方式的复杂性，我不会在这里解释为什么我不想走这条路线)。

另外，我还不够熟悉，但我有一种预感，也许我会因为将数据作为字符串检索而丢失数据？如果是这样，我会找到另一种方法。

现有代码和我尝试过的最新方法在这里：

    var data = '%PDF-1.7%����115 0 obj<</Linearized 1/L ...'
    var arr = [];
    var utf8 = unescape(encodeURIComponent(data));
    for (var i = 0; i < utf8.length; i++) {
        arr.push(utf8.charCodeAt(i));
    }

    var file = new Blob(arr, {type: 'application/pdf'});

【问题讨论】：

xhr.responseType="blob"; ...;文件 = xhr.response;
你尝试过新的 Blob(data, {type: 'application/pdf'}) 吗？
我确实尝试过。我很确定我也尝试过@dandavis 解决方案，但我会在几分钟后再试一次。
请参阅developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… 上的第二个和第三个示例，您正在模仿一种在您发布的代码中执行二进制 ajax 的老式方法，但从 IE8 开始就不需要了。

标签： javascript pdf blob plupload

【解决方案1】：

看起来你很接近。我只是为一个需要从另一个网站读取 PDF 并将其放入文件上传插件的网站执行此操作。这对我有用：

    var url = "http://some-websites.com/Pdf/";

    //You may not need this part if you have the PDF data locally already
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            //console.log(this.response, typeof this.response);
            //now convert your Blob from the response into a File and give it a name
            var fileOfBlob = new File([this.response], 'your_file.pdf');

            // Now do something with the File
            // for filuploader (blueimp), just use the add method
            $('#fileupload').fileupload('add', {
                files: [ fileOfBlob ], 
                fileInput: $(this)
            });
        }
    }
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();

我在 XHR 上找到了 blob here 的帮助。然后this SO answer 帮我命名了文件。您可能可以单独使用Blob，但除非将其传递给File，否则您将无法为其命名。

【讨论】：