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