javascript - 如何将 PDF 加载到 blob 中以便上传？

Question

我正在开发一个需要将文件传递给 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'});

Answer 1

看起来你很接近。我刚刚为一个需要从另一个网站读取 PDF 并将其放入文件 uploader 插件的网站做了这个。这是对我有用的:

    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 中。