1. 程式人生 > >PDF預覽 (引入pdf.js)

PDF預覽 (引入pdf.js)

pdf.js是一款開源的pdf文件讀取解析外掛,據說在HTML5下誕生的,對於主流的瀏覽器基本都支援。

pdf.js主要包含兩個庫檔案,一個pdf.js和一個pdf.worker.js,,一個負責API解析,一個負責核心解析

程式的結構翻譯
build/

pdf.js                      display layer,顯示層採用核心層並且暴露了一個更容易使用的API來渲染PDF檔案,並獲得其他的資料出文                                 件。該API基於不同的版本號而不同。

pdf.worker.js         core layer         core層是PDF解析和解釋核心功能,是所有其它層的基礎

web/

cmaps/                  character maps(required by core)  字元對映(core層需要的資源)

compatibility.js       polyfills for missing features           Polyfilling 是由 RemySharp提出的一個術語,它是用來描述複製缺少的                                    API和API功能的行為。

09.pdf                    test pdf                                            測試用的pdf檔案

debugger.js           helpful pdf debugging features

images/                 images for the viewer and annotation icons                 viewer介面的圖示

l10n.js                   localization

locale/                   translation files                                  翻譯檔案,包含所有支援語言的翻譯資源

viewer.css             viewer style sheet                             viewer介面的css

viewer.html            viewer html,viewer主介面

viewer.js                viewer layer,viewer介面的js,頁面引數包括載入的PDF檔案路徑都在這裡設定

在viewer.js中,var DEFAULT_URL 是預設的PDF檔案地址,當動態載入檔案時,要刪除這個欄位,在HTML中,

<script type="text/javascript">   
        var BASE64_MARKER = ';base64,';
        var preFileId = "";
        var pdfAsDataUri = "";
        var DEFAULT_URL
        $(document).ready(function () {
            Request = GetRequest();
                preFileId = Request["id"];
                $.ajax({
                    type: "post",
                    async: false,                    
                    contentType: "application/pdf;charset=utf-8",
                    url: 讀取檔案流地址,
                    success: function (data) {
                        var pdfAsDataUri = data;
                        var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
                        DEFAULT_URL = pdfAsArray;
                    }
                });
        });

        function convertDataURIToBinary(dataURI) {   //編碼轉換
            var raw = window.atob(dataURI);//這個方法在ie核心下無法正常解析。
            var rawLength = raw.length;
            //轉換成pdf.js能直接解析的Uint8Array型別
            var array = new Uint8Array(new ArrayBuffer(rawLength));
            for (i = 0; i < rawLength; i++) {
                array[i] = raw.charCodeAt(i) & 0xff;
            }
            return array;
        }
</script>
下載pdf.zip的地址:https://pan.baidu.com/s/1EkXSzn7Z4CrutTg4GqeIgw

https://blog.csdn.net/xiangcns/article/details/42089189