怎么改变sa系统默认的内容页面PDF展示的位置及样式
调整步骤:
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、调整前台的样式。