前端pdf预览-pdfh5-526互联

遇到问题用iframe、embed 标签死活都加载不出1M以上的文件，最后用开源项目 pdfh5解决问题

github连接： gjTool/pdfh5: web/h5/移动端PDF预览插件 (github.com)

1. 下载pdfh5

2.引包

<link rel="stylesheet" href="../../statics/css/pdfh5.css" />
<link rel="stylesheet" href="../../statics/css/style.css" />

<script src="../../statics/js/pdf.js" type="text/javascript" charset="utf-8"></script>
<script src="../../statics/js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
<script src="../../statics/js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>

示例代码

<div id="view"></div>

success : function(data){
                    this.pdfShow = true
                    var base64str = data
                    var binary = atob(base64str.replace(/\s/g, ''));
                    var len = binary.length;
                    var buffer = new ArrayBuffer(len);
                    var view = new Uint8Array(buffer);
                    for (var i = 0; i < len; i++) {
                        view[i] = binary.charCodeAt(i);
                    }
                    var blob = new Blob([view], {
                        type: 'application/pdf'
                    });
                    console.log(blob)

                    url=URL.createObjectURL(blob)
                    new Pdfh5("#view", {
                        pdfurl: url,
                        scrollEnable: true,
                        scale: 1,
                        zoomEnable: false,
                        maxZoom: 1
                    });
                    }
                }