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

Question

我的问题与以下帖子几乎相同某些 PDF 文件无法打开，但在我的情况下更简单。 我无法加载大于 2MB 的 PDF 文件，较小的文件工作正常。

当我使用readAsDataURL方法时， reader.result似乎被切片。 我将下面的示例（我的案例）生成的 base64 和运行良好的在线工具进行了比较，而我的 bse64 缺少最后一部分（一个很大的部分）。

如果有人对这种行为有所了解并且可以给我一个提示，我将不胜感激。

我的代码如下：


<!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

dataurls 有一定的限制，在某些浏览器上是 2MB。 另一种方法是使用此处描述的 BLOB-url：数据协议 URL 大小限制。

Answer 2

我找到了以下文件系统 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