如何将PDF加载到blob中以便上传?

时间:2014-09-09 17:58:49

标签: javascript pdf blob plupload

我正在研究一个需要将文件传递给PLUpload实例的drop listener的测试框架。我需要创建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'});

1 个答案:

答案 0 :(得分:2)

看起来你很亲密。我刚刚为一个需要从另一个网站读取PDF并将其放入fileuploader插件的网站。这对我有用:

    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,否则您无法为其命名。