javascript - 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，我也会在浏览器中显示不同的 Uint8Array。谁能告诉我为什么这些不同，以及如何使从 zip 文件中获取的 pdf 数据看起来与直接以 pdf 形式上传时相同？

Answer 1

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

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

async(type[, onUpdate])

Return a Promise of the content in the asked type.

Possible values for type :

• base64 : the result will be a string, the binary in a base64 form.
• text (or string): the result will be an unicode string.
• binarystring: the result will be a string in “binary” form, using 1 byte per char (2 bytes).
• array: the result will be an Array of bytes (numbers between 0 and 255).
• uint8array : the result will be a Uint8Array. This requires a compatible browser.
• arraybuffer : the result will be a ArrayBuffer. This requires a compatible browser.
• blob : the result will be a Blob. This requires a compatible browser.
• nodebuffer : the result will be a nodejs Buffer. This requires 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>