JSZip 在解压缩时更改文件的内容 (pdf)

Question

我正在使用FileReader api 将文件输入的内容加载到浏览器的内存中。这个 jsfiddle 包括一个工作示例： https://jsfiddle.net/qyh1s60d/

我把结果变成一个 Uint8Array 并显示在一个 div 中：

<label for="file-pdf">select a pdf:</label>
<input type="file" id="file-pdf" name="files[]" />
<div id="result-pdf">
</div>

JS

document.getElementById('file-pdf').addEventListener('change', handlePdfSelect, false);
function handlePdfSelect(evt) {
    var files = evt.target.files; // FileList object
    var reader = new FileReader();
    reader.onload = (e)=>{
       var res = new Uint8Array(e.target.result);
       resultPdf.innerHTML = res.slice(0, 5)
    }

    reader.readAsArrayBuffer(files[0]);

  }

到目前为止一切顺利。 div 会按预期显示一个数字数组。

接下来我想使用 JSZip 来获取位于 zip 文件中的相同 pdf。这是html：

label for="file-zip">select a zip:</label>
<input type="file" id="file-zip" name="files[]" />
<div id="result-zip">
</div>

还有 JS

document.getElementById('file-zip').addEventListener('change', handleZipSelect, false); 

function handleZipSelect(evt) {
    var files = evt.target.files; // FileList object
    var reader = new FileReader();
    reader.onload = (e)=>{
       var res = new Uint8Array(e.target.result);
       JSZip.loadAsync(res).then(function(data){
       var pdfs = []       
        Object.keys(data['files']).forEach(f => {
                         if(/\.pdf$/.test(f)){
                             pdfs.push(data['files'][f])
                         }
        })
        var pdfcontents = pdfs[0]['_data']['compressedContent'].slice(0, 5)
        resultZip.innerHTML = pdfcontents;

       })

    }

    reader.readAsArrayBuffer(files[0]);


  }

尽管我在这两个文件上传中使用了相同的 pdf，但我在浏览器中显示了不同的 Uint8Arrays。谁能告诉我为什么这些不同，以及如何使从 zip 文件中获取的 pdf 数据看起来与直接上传为 pdf 时相同？

Answer 1

是的，这两个文件彼此不同，它们给出不同的Uint8Arrays，这是因为第一个是原始 pdf 文件，另一个是相同的 pdf 文件，但在他的压缩文件中状态。

因此，如果您需要提取 pdf 文件的内容，则需要一行额外的代码来提取内容，方法是：async()

异步（类型[，onUpdate]）

返回请求类型中内容的 Promise。

类型的可能值：

• base64 : 结果将是一个字符串，base64 格式的二进制文件。
• 文本（或字符串）：结果将是一个 unicode 字符串。
• binarystring：结果将是“二进制”形式的字符串，每个字符使用 1 个字节（2 个字节）。
• 数组：结果将是一个字节数组（0 到 255 之间的数字）。
• uint8array ：结果将是一个 Uint8Array。这需要兼容的浏览器。
• arraybuffer ：结果将是一个 ArrayBuffer。这需要兼容的浏览器。
• blob ：结果将是一个 Blob。这需要兼容的浏览器。
• nodebuffer ：结果将是一个 nodejs 缓冲区。这需要 nodejs。

Here the documentation on GitHub

这里是How to read a file using jszip

工作示例： https://jsfiddle.net/e2Lxyrpn/

var resultPdf = document.getElementById('result-pdf');
var resultZip = document.getElementById('result-zip');
document.getElementById('file-pdf').addEventListener('change', handlePdfSelect, false);
function handlePdfSelect(evt) {
    var files = evt.target.files; // FileList object
    var reader = new FileReader();
    reader.onload = (e)=>{
       var res = new Uint8Array(e.target.result);
       
       resultPdf.innerHTML = res.slice(0, 5)
    }

    reader.readAsArrayBuffer(files[0]);
  
  }
  
document.getElementById('file-zip').addEventListener('change', handleZipSelect, false); 

function handleZipSelect(evt) {
    var files = evt.target.files; // FileList object
    var reader = new FileReader();
    reader.onload = (e)=>{
       var res = new Uint8Array(e.target.result);
       JSZip.loadAsync(res).then(function(data){
       var pdfs = []       
        Object.keys(data['files']).forEach(f => {
                         if(/\.pdf$/.test(f)){
                             pdfs.push(data['files'][f])
                         }
        });
        //>>>>>>>>------read the file Content --------
        pdfs[0].async('Uint8Array').then(function (fileData) {
							var allstring = fileData.slice(0, 5);
       						resultZip.innerHTML = allstring;
						});
        //--------------------------------------------
       
       })

    }

    reader.readAsArrayBuffer(files[0]);
    
  
  }
  
  console.log(JSZip)
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.min.js"></script>
<label for="file-pdf">select a pdf:</label>
<input type="file" id="file-pdf" name="files[]" />
<div id="result-pdf">
</div>
<br>
<br>
<br>
<br>
<label for="file-zip">select a zip containing the same pdf:</label>
<input type="file" id="file-zip" name="files[]" />
<div id="result-zip">
</div>