如何在javascript中打开和读取二进制流中的PDF

I'm having some difficulties in reading a binary data stream in JavaScript.

Currently, a window pops open and says Failed to load PDF document. I'll post my response and code below, any help would be greatly appreciated.

Here's my back-end PHP:

function getPDF() {
        $file = __DIR__.'\..\pdf\FAS_HeadedPaper.pdf';
        header("Content-Length: " . filesize ( $file ) );
        header("Content-type: application/octet-stream");
        header("Content-disposition: attachment; filename=".basename($file));
        header('Expires: 0');
        header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
        ob_clean();
        flush();

        readfile($file);
    }

Here's my front end JavaScript controller:

$scope.sendRef = function(ref){

        $http({
            method: 'GET',
            url: $scope.endpoint + 'attachments/PDF',
            async: true,
            headers: {
                'Authorization': 'MyToken'
            },
            params: {
                ref: ref
            },
            dataType:'blob'
        })
            .success(function (data) {
                console.log(data);


                var file = new Blob([(data['response'])], {type: 'application/pdf'});
                //var file = data['response'];
                var fileURL = URL.createObjectURL(file);
                window.open(fileURL);
                $scope.content = $sce.trustAsResourceUrl(fileURL);

            })
            .error(function (data, status) {
                console.log('Error: ' + status);
                console.log(data);
            });

    }

This is just a snippet of the response I get in my console on my browser:

%PDF-1.5
%����
1 0 obj
<</Type/Catalog/Pages 2 0 R/Lang(en-GB) /StructTreeRoot 14 0 R/MarkInfo<</Marked true>>>>
endobj
2 0 obj
<</Type/Pages/Count 1/Kids[ 3 0 R] >>
endobj
3 0 obj
<</Type/Page/Parent 2 0 R/Resources<</Font<</F1 5 0 R/F2 7 0 R/F3 9 0 R>>/XObject<</Image11 11 0 R>>/ProcSet[/PDF/Text/ImageB/ImageC/ImageI] >>/MediaBox[ 0 0 595.32 841.92] /Contents 4 0 R/Group<</Type/Group/S/Transparency/CS/DeviceRGB>>/Tabs/S/StructParents 0>>
endobj
4 0 obj
<</Filter/FlateDecode/Length 917>>
stream
x��V[O�X~���p�V>��eUU[B
�J�B���J�-�S�H����  -��Y�������'۴�E1k����۶-f7��]��z�%�~ߔ�E�\UE���7o��ɘO����dR�0l�$�'�v,
V��z8 �PL�����e�r����pp�E6.�6�0L�`�*<�}�5   Q��)ӗ��.k�Hgu�m���dc|h����&���x�ߞ��{GIY�L��d
��e��LMd�ڛb�i��~e%��X���\�l:C~)P%=������\g7+14)^��} ����~�+.m��2"-�w�Q��?   KZKP��Su�=���

2个回答



我实际修好了它以便它可以按照我需要的方式工作!</ p>

我添加< code> responseType:'arraybuffer',</ code>就在blob之前,然后在成功中将其称为application / pdf,它运行正常。</ p>

  $ scope。  sendRef = function(ref){

$ http({
method:'GET',
url:$ scope.endpoint +'attachments / PDF',
async:true,
headers:{\ n'授权':'MyToken'
},
参数:{
ref:ref
},
responseType:'arraybuffer',
dataType:'blob'
})
.success( function(data){
console.log(data);

var file = new Blob([(data ['response'])],{type:'application / pdf'});
// var file = data ['response'];
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
$ scope.content = $ sce.trustAsResourceUrl(fileURL);

})
.error(function(data,status){
console.log('Error:'+ status);
console.log (数据);
});

}
</ code> </ pre>
</ div>

展开原文

原文

I actually fixed it so that it would work as I needed it!

I added responseType: 'arraybuffer', just before the blob and then called it as an application/pdf within the success and it worked fine.

$scope.sendRef = function(ref){

        $http({
            method: 'GET',
            url: $scope.endpoint + 'attachments/PDF',
            async: true,
            headers: {
                'Authorization': 'MyToken'
            },
            params: {
                ref: ref
            },
            responseType: 'arraybuffer',
            dataType:'blob'
        })
            .success(function (data) {
                console.log(data);


                var file = new Blob([(data['response'])], {type: 'application/pdf'});
                //var file = data['response'];
                var fileURL = URL.createObjectURL(file);
                window.open(fileURL);
                $scope.content = $sce.trustAsResourceUrl(fileURL);

            })
            .error(function (data, status) {
                console.log('Error: ' + status);
                console.log(data);
            });

    }

I think you can't just "open and read" PDF files like that. You should consider using a PDF rendering & parsing library, for example PDF.js.

dongyue3795
dongyue3795 好的! 我在公司和个人项目中使用它。 这里有一个官方演示:mozilla.github.io/pdf.js/web/viewer.html。 此外,还有以下示例/演练:mozilla.github.io/pdf.js/examples
4 年多之前 回复
duana1021
duana1021 你能阅读PDF数据流并使用该库显示/下载吗?
4 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐