您的位置: 首页 >日志>动易系统>详细内容

动易系统

怎么改变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、调整前台的样式。