PDFJS加载含非标准字符的本地PDF报错的问题及解决方案

使用PDFJS实现PDF在线预览功能时，现有代码可正常加载PDFJS官方演示PDF，但测试其他合规PDF时无法正常加载。

可正常加载的演示PDF内容 #

%PDF-1.7
1 0 obj  % entry point
<</Type/Catalog/Pages 2 0 R>>
endobj
2 0 obj<</Type/Pages/MediaBox[ 0 0 200 200]/Count 1/Kids[3 0 R]>>endobj
3 0 obj<</Type/Page/Parent 2 0 R/Resources<</Font<</F1 4 0 R>>>>/Contents 5 0 R>>endobj
4 0 obj<</Type/Font/Subtype/Type1/BaseFont/Times-Roman>>endobj
5 0 obj  % page content
<</Length 44>> stream
BT 70 50 TD /F1 12 Tf(Hello, world!) Tj ET
endstream endobj
xref trailer <</Size 6/Root 1 0 R>> startxref
%%EOF

原有实现代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.js"></script>
<input type="file" id="input"/> </br> <canvas id="can" width=1000 height=1000/>
<script>
    document.getElementById('input').addEventListener('change', function(e){
        var reader = new FileReader()
        reader.onload = function(x){
            window['pdfjs-dist/build/pdf'].getDocument({data:x.target.result}).promise.then(function(pdf){
                pdf.getPage(1).then(function(page){
                    page.render({canvasContext:document.getElementById('can').getContext('2d'),
                        viewport:page.getViewport({scale:1})})
        })})}
        reader.readAsText(e.target.files[0])
    }, false)
</script>

错误表现 #

Overleaf生成的仅含"TEST"的单页合规PDF（可在Firefox、Chromium、Mac预览应用正常打开）上传后，控制台抛出如下报错：

Warning: Invalid stream: "FormatError: Bad FCHECK in flate stream: 120, 253"
util.js:306 Warning: Indexing all PDF objects
2util.js:306 Warning: Invalid stream: "FormatError: Bad FCHECK in flate stream: 120, 253"
viewPDF.html:1 Uncaught (in promise) InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}
Promise.then (async)
reader.onload @ viewPDF.html:7
load (async)
(anonymous) @ viewPDF.html:6

异常PDF片段（前几行） #

%PDF-1.5
%���
3 0 obj
<< /Linearized 1 /L 11602 /H [ 678 125 ] /O 7 /E 11072 /N 1 /T 11321 >>
endobj

4 0 obj
<< /Type /XRef /Length 51 /Filter /FlateDecode /DecodeParms << /Columns 4 /Predictor 12 >> /W [ 1 2 1 ] /Index [ 3 14 ] /Info 1 0 R /Root 5 0 R /Size 17 /Prev 11322                 /ID [<8f1689fb6a16051fd66ebeadaa364b8d><4a8030207ba6597007a967ed52a9309d>] >>
stream
x�cbd�g`b`8 $��XF@���*��    ��@�Y�����v�#�.
endstream
endobj

5 0 obj
<< /Pages 14 0 R /Type /Catalog >>
endobj
6 0 obj
<< /Filter /FlateDecode /S 36 /Length 48 >>
stream
x�c```e``Z��
            pe31
                B�����,��v�>aW�

开发需求 #

搭建简易HTML应用，支持用户上传任意可在标准PDF查看器中打开的本地PDF并预览，不需要通过URL加载PDF资源。

修复方案 #

将原有代码中的reader.readAsText替换为reader.readAsBinaryString即可解决问题。

内容的提问来源于stack exchange，提问作者Mathew