无法使用 JS 加载大于 2MB 的 PDF 文件

Question

My question is almost the same to the following post Certain PDF files won't open but in my case is simpler.我的问题与以下帖子几乎相同某些 PDF 文件无法打开，但在我的情况下更简单。 I can't load PDF files larger than 2MB, with smaller files works fine.我无法加载大于 2MB 的 PDF 文件，较小的文件工作正常。

When I use readAsDataURL method, the reader.result would seem to be sliced.当我使用readAsDataURL方法时， reader.result似乎被切片。 I made comparition between base64 generated by the example below (my case) and online tool that works fine, to my bse64 missing the last part (a big one).我将下面的示例（我的案例）生成的 base64 和运行良好的在线工具进行了比较，而我的 bse64 缺少最后一部分（一个很大的部分）。

If someone knows something about this behaviour and can give me a hint i will be grateful.如果有人对这种行为有所了解并且可以给我一个提示，我将不胜感激。

My code below:我的代码如下：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="height: 100%;">
    <button onclick="getFile(event)">Get File</button>
    <input id="pdfInputFile" type="file" accept="application/pdf" style="display:none" onchange="loadPDF(this);" />
    <object id="pdfViewer" type="application/pdf" style="height:100%; width:100%;border:solid 1px" >
    </object>
</body>

<script>

    function getFile(e) {
        e.preventDefault();
        document.getElementById("pdfInputFile").click();
    }


    function loadPDF(input) {
        
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById("pdfViewer").setAttribute('data', reader.result);
            }

           reader.readAsDataURL(input.files[0]);
        }
    }
</script>
</html>

Answer 1

There are certain limits to dataurls, on some browsers this is 2MB. dataurls 有一定的限制，在某些浏览器上是 2MB。 An alternative would be to use BLOB-urls as described here: Data protocol URL size limitations .另一种方法是使用此处描述的 BLOB-url：数据协议 URL 大小限制。

Answer 2

I found the following solution for file system PDF files (was my case)我找到了以下文件系统 PDF 文件的解决方案（是我的情况）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="height: 100%;">
    <button onclick="getFile(event)">Get File</button>
    <input id="pdfInputFile" type="file" accept="application/pdf" style="display:none" onchange="loadPDF(this);" />
    <object id="pdfViewer" type="application/pdf" style="height:100%; width:100%;border:solid 1px" >
    </object>
</body>

<script>

    function getFile(e) {
        e.preventDefault();
        document.getElementById("pdfInputFile").click();
    }


    function loadPDF(input) {

        if (input.files && input.files[0]) {
            showFile(input.files[0])
        }
    }

    function showFile(blob){

        // It is necessary to create a new blob object with mime-type explicitly set
        // otherwise only Chrome works like it should
        var newBlob = new Blob([blob], {type: "application/pdf"});

        // Create a link pointing to the ObjectURL containing the blob.
        const data = window.URL.createObjectURL(newBlob);        
        document.getElementById("pdfViewer").setAttribute('data', data);
        setTimeout(function(){
            // For Firefox it is necessary to delay revoking the ObjectURL
            window.URL.revokeObjectURL(data);
        }, 100);
    }

</script>
</html>

无法使用 JS 加载大于 2MB 的 PDF 文件

问题描述

2 个解决方案

解决方案1
0 2020-11-17 15:42:56

解决方案2
0 2020-11-17 16:15:06

无法使用 JS 加载大于 2MB 的 PDF 文件

问题描述

2 个解决方案

解决方案1 0 2020-11-17 15:42:56

解决方案2 0 2020-11-17 16:15:06

解决方案1
0 2020-11-17 15:42:56

解决方案2
0 2020-11-17 16:15:06