pdfj显示base64格式PDF中的全部页面

周金鱼啊
已于 2024-02-27 16:01:56 修改
阅读量513
点赞数 8
文章标签：前端 pdf javascript
于 2023-12-07 15:16:10 首次发布
本文链接：https://blog.csdn.net/weixin_40881970/article/details/134856355
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>文档预览</title>
</head>

<body>
    <script>
        document.body.innerHTML += ('<div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div><div id="load_title">正在加载中，请稍后</div></div>');
    </script>

    <div id="pdfViews"> </div>

</body>



</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
<script>
    window.title = "文档预览";
    window.onload = function () {
        // 获取URL中的参数
        var urlParams = new URLSearchParams(window.location.search);
        let identifyCriticalMeetingGuid = urlParams.get("id");
        let type = urlParams.get("type");


        let url = "";
        let hostLocation = window.location.origin;
        if (hostLocation.includes("itdp-pd.glodon.com")) {
            url = "https://www.tttppp.com/api";
        } else {
            url = "https://tttppp-dev.com/api";
        }

        ajaxMethod(`${url}/meeting/document/verify?identifyCriticalMeetingGuid=${identifyCriticalMeetingGuid}&type=${type}`, 'GET', null)
            .then((result) => {
                if (type == "oaApproval") {
                    window.location.replace(result.data);
                }
                if (type == "viewDocument") {
                    renderPdf(result.data);
                    document.body.className += ' loaded';
                }

            })
            .catch((err) => {
                document.body.className += ' loaded';
                document.write(JSON.stringify(err))
            });

        function ajaxMethod(url, type, data) {
            return new Promise((resolve, reject) => {
                var ajax = new XMLHttpRequest();
                ajax.open(type, url, true);
                ajax.setRequestHeader("Content-type", "application/json;charset=UTF-8");
                ajax.responseType = "json";
                ajax.dataType = "json";
                if (JSON.stringify(data)) {
                    ajax.send(JSON.stringify(data));
                } else {
                    ajax.send();
                }
                ajax.onreadystatechange = function () {
                    if (ajax.readyState == 4 && ajax.status == 200) {
                        if (ajax.response.code === 0) {
                            resolve(ajax.response);
                        } else {
                            reject(ajax.response);
                        }
                        return;
                    }
                }
            })
        };
    }

    function renderPdf(base64Str) {
        var pdfjsLib = window['pdfjs-dist/build/pdf'];
        // Base64是一组类似的二进制到文本(binary-to-text)的编码规则，使得二进制数据在解释成radix-64的表现形式后可以用ASCII字符串的格式表示出来。Base64编码将数据转为“安全字符”用于传输，编码会使内容变长1/3。
        // atob() 对经过 base-64 编码的字符串进行解码。
        // btoa() 方法可以将一个二进制字符串（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串。
        var pdfData = atob(base64Str);

        // GlobalWorkerOptions
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.min.js';

        // 异步下载pdf
        var loadingTask = pdfjsLib.getDocument({
            data: pdfData
        });
        // 加载pdf
        loadingTask.promise.then(function (pdf) {
            for (i = 0; i <= pdf.numPages; i++) {
                pdf.getPage(i).then(function (page) {
                    var scale = 1.5;// 倍数
                    var viewport = page.getViewport({ scale: scale });
                    // 使用 canvas 绘制
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    document.querySelector("#pdfViews").appendChild(canvas);

                    // 内容
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };

                    // 渲染
                    page.render(renderContext);
                }).catch((err) => {

                })
            }

        }, function (error) {
            // pdf加载错误
            console.error('loading error', error);
        })
    }
</script>

<style>
    html,
    body,
    #app,
    iframe {
        margin: 0;
        width: 100%;
        height: 100%;
        background: #000;
        border: none;
    }

    canvas {
        display: block;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .chromeframe {
        margin: .2em 0;
        background: #999;
        color: #000;
        padding: .2em 0
    }

    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999
    }

    #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #FFF;
        -webkit-animation: spin 2s linear infinite;
        -ms-animation: spin 2s linear infinite;
        -moz-animation: spin 2s linear infinite;
        -o-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        z-index: 1001
    }

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #FFF;
        -webkit-animation: spin 3s linear infinite;
        -moz-animation: spin 3s linear infinite;
        -o-animation: spin 3s linear infinite;
        -ms-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #FFF;
        -moz-animation: spin 1.5s linear infinite;
        -o-animation: spin 1.5s linear infinite;
        -ms-animation: spin 1.5s linear infinite;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg)
        }

        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg)
        }

        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #000;
        /*背景色 原#1abc9c */
        z-index: 1000;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    #loader-wrapper .loader-section.section-left {
        left: 0
    }

    #loader-wrapper .loader-section.section-right {
        right: 0
    }

    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000)
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000)
    }

    .loaded #loader {
        opacity: 0;
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out
    }

    .loaded #loader-wrapper {
        visibility: hidden;
        /*-webkit-transform: translateY(-100%);*/
        /*-ms-transform: translateY(-100%);*/
        /*transform: translateY(-100%);*/
        /*-webkit-transition: all .3s 1s ease-out;*/
        /*transition: all .3s 1s ease-out*/
    }

    .no-js #loader-wrapper {
        display: none
    }

    .no-js h1 {
        color: #222
    }

    #loader-wrapper #load_title {
        font-family: 'Open Sans';
        color: #e1e1e1;
        font-size: 16px;
        width: 100%;
        text-align: center;
        z-index: 9999999999999;
        position: absolute;
        top: 60%;
        opacity: 1;
        line-height: 30px
    }

    #loader-wrapper #load_title span {
        font-weight: normal;
        font-style: italic;
        font-size: 13px;
        color: #FFF;
        opacity: .5
    }
</style>