';\n var dompdf = $.parseHTML(pdfscript);\n $(dompdf).attr('src', '/content/_common/assets/scripts/pdf.js');\n $(dompdf).on('load',\n function () {\n }).appendTo($('body'));\n }\n\n //遍历所有pdf类型标签\n $(\"[data-uitype ='pdf']\")\n .each(function () {\n var url = $(this).attr(\"data-powerurl\"); //获取当前pdf文件路径\n var ran = Math.floor(Math.random() * 100); //生成随机数\n $(this).removeAttr(\"src\");\n $(this)[0].insertAdjacentHTML(\"afterEnd\",\n \"
页码: \" +\n \" / \" +\n \"下载文件
\");\n\n if (url != null) {\n var version = 10.0;\n var ua = navigator.userAgent.toLowerCase();\n var isiE = ua.indexOf(\"msie\") > -1;\n var safariVersion;\n\n if (isiE) {\n safariVersion = ua.match(/msie ([\\d.]+)/)[1];\n if (safariVersion <= version) {\n if (confirm(\"当前IE浏览器版本过低,无法直接查看PDF请点击链接,下载文件到本地查看。\")) {\n window.location.href = url;\n }\n };\n }\n\n pdfjsLib.GlobalWorkerOptions.workerSrc = '/content/_common/assets/scripts/pdf.worker.js'; //加载js\n var pdfDoc = null,\n pageNum = 1,\n pageRendering = false,\n pageNumPending = null,\n canvas = document.getElementById('the-canvas' + ran),\n ctx = canvas.getContext('2d');\n\n function renderPage(num) {\n pageRendering = true;\n var scale = 1;\n pdfDoc.getPage(num).then(function (page) {\n var viewport = page.getViewport(scale);\n var CSS_UNITS = 96.0 / 72.0;\n var widthScale = viewport.height / viewport.width;\n canvas.width = Math.floor(viewport.width * CSS_UNITS);\n canvas.height = Math.floor(viewport.height * CSS_UNITS);\n ////canvas.style.width = $(\"[data-power-area='content']\").width() + \"px\";\n ////canvas.style.height = Math.floor($(\"[data-power-area='content']\").width() * widthScale) + \"px\";\n\n var renderContext = {\n transform: [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0],\n canvasContext: ctx,\n viewport: viewport\n };\n var renderTask = page.render(renderContext);\n renderTask.promise.then(function () {\n pageRendering = false;\n if (pageNumPending !== null) {\n renderPage(pageNumPending);\n pageNumPending = null;\n }\n });\n });\n document.getElementById('page_num' + ran).textContent = num;\n }\n\n function queueRenderPage(num) {\n if (pageRendering) {\n pageNumPending = num;\n } else {\n renderPage(num);\n }\n }\n\n function onPrevPage() {\n if (pageNum <= 1) {\n return;\n }\n pageNum--;\n queueRenderPage(pageNum);\n }\n\n document.getElementById('prev' + ran).addEventListener('click', onPrevPage);\n\n function onNextPage() {\n if (pageNum >= pdfDoc.numPages) {\n return;\n }\n pageNum++;\n queueRenderPage(pageNum);\n }\n\n document.getElementById('next' + ran).addEventListener('click', onNextPage);\n pdfjsLib.getDocument({\n url: url,\n rangeChunkSize: 65536 * 10000,\n disableAutoFetch: 0,\n cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',\n cMapPacked: true\n }).then(\n function (pdfDoc_) {\n pdfDoc = pdfDoc_;\n document.getElementById('page_count' + ran).textContent = pdfDoc.numPages;\n renderPage(pageNum);\n });\n }\n });\n });3、在代码片段里找到$(this)[0].insertAdjacentHTML(\"afterEnd\",\n 然后改成 \n $('.side')[0].insertAdjacentHTML(\"beforeend\",.side是要渲染生成PDF位置的类名,根据情况修改其他的代码。4、调整前台的样式。", "copyrightHolder": "本站原创" }
您的位置: 首页 >日志>动易系统>详细内容

动易系统

怎么改变sa系统默认的内容页面PDF展示的位置及样式

来源:本站原创 发布时间:2025-09-30 10:28:56 浏览次数: 【字体:

调整步骤:
1、找到/content/_common/base/js/power.js 
2、在power.js里找到对应的代码片段
 

 $(function () {
        if ($("[data-uitype ='pdf']").length > 0) {
            //动态加载pdf.js
            var pdfscript = '<script></script>';
            var dompdf = $.parseHTML(pdfscript);
            $(dompdf).attr('src', '/content/_common/assets/scripts/pdf.js');
            $(dompdf).on('load',
                function () {
                }).appendTo($('body'));
        }

        //遍历所有pdf类型标签
        $("[data-uitype ='pdf']")
            .each(function () {
                var url = $(this).attr("data-powerurl"); //获取当前pdf文件路径
                var ran = Math.floor(Math.random() * 100); //生成随机数
                $(this).removeAttr("src");
                $(this)[0].insertAdjacentHTML("afterEnd",
                    "<div class='pdf-content'><canvas id='the-canvas" +
                    ran +
                    "'></canvas></div><div class='pdf-page'><button id='prev" +
                    ran +
                    "'>上一页</button><span class='page-num'>页码: " +
                    "<span id='page_num" +
                    ran +
                    "'></span><em> / </em><span id='page_count" +
                    ran +
                    "'></span></span><button id='next" +
                    ran +
                    "'>下一页</button>" +
                    "<a class='pdf-download' href=" +
                    url +
                    "  download=" +
                    url +
                    "  style='text-decoration: none'>下载文件</a></div>");

                if (url != null) {
                    var version = 10.0;
                    var ua = navigator.userAgent.toLowerCase();
                    var isiE = ua.indexOf("msie") > -1;
                    var safariVersion;

                    if (isiE) {
                        safariVersion = ua.match(/msie ([\d.]+)/)[1];
                        if (safariVersion <= version) {
                            if (confirm("当前IE浏览器版本过低,无法直接查看PDF请点击链接,下载文件到本地查看。")) {
                                window.location.href = url;
                            }
                        };
                    }

                    pdfjsLib.GlobalWorkerOptions.workerSrc = '/content/_common/assets/scripts/pdf.worker.js'; //加载js
                    var pdfDoc = null,
                        pageNum = 1,
                        pageRendering = false,
                        pageNumPending = null,
                        canvas = document.getElementById('the-canvas' + ran),
                        ctx = canvas.getContext('2d');

                    function renderPage(num) {
                        pageRendering = true;
                        var scale = 1;
                        pdfDoc.getPage(num).then(function (page) {
                            var viewport = page.getViewport(scale);
                            var CSS_UNITS = 96.0 / 72.0;
                            var widthScale = viewport.height / viewport.width;
                            canvas.width = Math.floor(viewport.width * CSS_UNITS);
                            canvas.height = Math.floor(viewport.height * CSS_UNITS);
                            ////canvas.style.width = $("[data-power-area='content']").width() + "px";
                            ////canvas.style.height = Math.floor($("[data-power-area='content']").width() * widthScale) + "px";

                            var renderContext = {
                                transform: [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0],
                                canvasContext: ctx,
                                viewport: viewport
                            };
                            var renderTask = page.render(renderContext);
                            renderTask.promise.then(function () {
                                pageRendering = false;
                                if (pageNumPending !== null) {
                                    renderPage(pageNumPending);
                                    pageNumPending = null;
                                }
                            });
                        });
                        document.getElementById('page_num' + ran).textContent = num;
                    }

                    function queueRenderPage(num) {
                        if (pageRendering) {
                            pageNumPending = num;
                        } else {
                            renderPage(num);
                        }
                    }

                    function onPrevPage() {
                        if (pageNum <= 1) {
                            return;
                        }
                        pageNum--;
                        queueRenderPage(pageNum);
                    }

                    document.getElementById('prev' + ran).addEventListener('click', onPrevPage);

                    function onNextPage() {
                        if (pageNum >= pdfDoc.numPages) {
                            return;
                        }
                        pageNum++;
                        queueRenderPage(pageNum);
                    }

                    document.getElementById('next' + ran).addEventListener('click', onNextPage);
                    pdfjsLib.getDocument({
                        url: url,
                        rangeChunkSize: 65536 * 10000,
                        disableAutoFetch: 0,
                        cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
                        cMapPacked: true
                    }).then(
                        function (pdfDoc_) {
                            pdfDoc = pdfDoc_;
                            document.getElementById('page_count' + ran).textContent = pdfDoc.numPages;
                            renderPage(pageNum);
                        });
                }
            });
    });


3、在代码片段里找到$(this)[0].insertAdjacentHTML("afterEnd", 然后改成     $('.side')[0].insertAdjacentHTML("beforeend",.side是要渲染生成PDF位置的类名,根据情况修改其他的代码。
4、调整前台的样式。