ブラウザでpdfファイルをbase64に正しく変換する方法は？

Question

クロムエクステンションに次のコードの3つのバージョンがあります。これは、クリックをpdfファイルを指すリンクに傍受し、そのファイルをフェッチし、base64に変換してログに記録しようとします。しかし、私はバイナリ形式とエンコーディングについて実際には分からないので、私はこれを夢中にしています。

var links = document.getElementsByTagName("a"); 

function transform(blob) { 
    return btoa(String.fromCharCode.apply(null, new Uint8Array(blob))); 
}; 

function getlink(link) { 
    var x = new XMLHttpRequest(); 
    x.open("GET", link, true); 
    x.responseType = 'blob'; 
    x.onload = function(e) { 
     console.log("Raw response:"); 
     console.log(x.response); 
     console.log("Direct transformation:"); 
     console.log(btoa(x.response)); 
     console.log("Mysterious thing I got from SO:"); 
     console.log(transform(x.response)); 
     window.location.href = link; 
    }; 

    x.onerror = function (e) { 
     console.error(x.statusText); 
    }; 

    x.send(null); 
}; 

for (i = 0, len = links.length; i < len; i++) { 
    var l = links[i] 
    l.addEventListener("click", function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     e.stopImmediatePropagation(); 
     getlink(this.href); 
    }, false); 
}; 

バージョン1はx.responseTypeへの呼び出し、またはtransformへの呼び出しを持っていません。それは私のオリジナル、素朴な実装でした。それはエラーを投げた： "エンコードされる文字列はLatin1範囲外の文字を含んでいます。"

そのエラーをグーグルした後、私は、画像解析にすることを示唆している、this prior SOが見つかりました：

1. の応答タイプはblobに設定する必要があります。だから、このコードはそれを行います。
2. 奇妙な線がありますが、私はそれが全く何をしているのか分かりません：String.fromCharCode.apply(null, new Uint8Array(blob))。

私はバイナリ形式について何も知らないので、おそらくばかげて、PDF64の作成はランダムな画像形式base64の作成と同じであると思いました。だから、うまくSOの伝統で、私は本当に理解していないコードをコピーしました。段階的に。

バージョン2のコードでは、応答タイプをblobに設定するだけで、2番目の変換は試行しませんでした。そしてコードはうまくいって、base64文字列のように見えるものを記録しましたが、は明らかに不正確な文字列です。全体として、ログに記録されます：

W29iamVjdCBCbG9iXQ==

これはちょうど間違っています。明らかに、46kのpdfファイルでは短すぎると思います。コマンドラインからPythonで作成したリファレンスbase64エンコーディングは、予想通り、はるかに長い時間がかかりました。

バージョン3のコードではstringFromCharCodeとそれ以外のすべてを使用して神秘的な変換が適用されますが、これはtransform関数に組み込まれています。

しかし、これはまったくログに記録されません。空の行が適切な場所にコンソールに表示されます。エラーもナンセンス出力も空白行もありません。

私は以前のテストから正しいファイルを取得していることを知っています。また、生のレスポンスオブジェクトを記録する呼び出しは、私が実験しているpdfの正しいファイルサイズであるBlob {size: 45587, type: "application/pdf"}を生成するので、ブロブには実際にブラウザに入るときに必要なものが含まれています。

私は現在のバージョンのChromeを使用しており、サポートする必要があります。

私が間違っていることを誰かに教えてもらえますか？

ありがとうございます！

Answer 1

私は自分の解決策を見つけたと思う。応答タイプはarraybufferでなく、blobである必要があります。

Answer 2

最新のブラウザのみをサポートする必要がある場合は、FileReader#readAsDataURLも使用できるはずです。

var reader = new FileReader(); 
reader.addEventListener("load", function() { 
    console.log(reader.result); 
}, false); 
// The function accepts Blobs and Files 
reader.readAsDataURL(x.response); 

これはあなたのbase64データが含まれますdata URIを、ログに記録します：あなたはこのような何かを聞かせ

。