123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- $(document).ready(function() {
- var recordId = requestParam.recordId;
- var hrefStr = requestParam.hrefStr;
- // 获取PDF容器和设置其样式
- var pdfContainer = document.getElementById("pdf-container");
- pdfContainer.style.width = 'calc(100% - 20px)'; // 左右间隔10px
- pdfContainer.style.margin = '0 auto';
- pdfContainer.style.overflow = 'auto'; // 允许滚动
- // 调用后端服务获取base64编码的PDF数据
- mbos.eas.invokeScript({
- name: "commonOSFservice",
- param: ['getJobRegistrationPackage', JSON.stringify({ recordId: recordId })],
- success: function(res) {
- // 后端获取到的base64Data
- var base64Data = res.msg;
- // 将base64数据转换为PDF.js可以识别的格式
- var pdfData = atob(base64Data);
- var loadingTask = pdfjsLib.getDocument({data: pdfData});
- loadingTask.promise.then(function(pdf) {
- // 获取第一页(可以根据需要修改)
- pdf.getPage(1).then(function(page) {
- var scale = 1.5; // 初始缩放比例,可以根据需要调整
- var viewport = page.getViewport({ scale: scale });
- // 设置容器的宽度和高度
- pdfContainer.style.width = viewport.width + 'px';
- pdfContainer.style.height = viewport.height + 'px';
- // 创建一个canvas元素来渲染PDF页面
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
- canvas.height = viewport.height;
- canvas.width = viewport.width;
- // 将canvas添加到容器中
- pdfContainer.appendChild(canvas);
- // 渲染PDF页面到canvas上
- var renderContext = {
- canvasContext: context,
- viewport: viewport
- };
- page.render(renderContext);
- // 添加缩放和拖拽功能
- var isDragging = false;
- var lastScale = scale;
- var startX, startY, startScale;
- // 缩放事件
- canvas.addEventListener('wheel', function(event) {
- if (event.deltaY < 0) {
- scale *= 1.1;
- } else {
- scale /= 1.1;
- }
- renderPage(scale);
- });
- // 拖拽事件
- canvas.addEventListener('mousedown', function(event) {
- isDragging = true;
- startX = event.clientX - canvas.offsetLeft;
- startY = event.clientY - canvas.offsetTop;
- startScale = scale;
- });
- canvas.addEventListener('mousemove', function(event) {
- if (isDragging) {
- var dx = event.clientX - startX;
- var dy = event.clientY - startY;
- // 更新canvas的位置
- canvas.style.left = dx + 'px';
- canvas.style.top = dy + 'px';
- }
- });
- canvas.addEventListener('mouseup', function() {
- isDragging = false;
- });
- canvas.addEventListener('mouseout', function() {
- isDragging = false;
- });
- // 重新渲染页面的函数
- function renderPage(newScale) {
- viewport = page.getViewport({ scale: newScale });
- canvas.width = viewport.width;
- canvas.height = viewport.height;
- renderContext.viewport = viewport;
- page.render(renderContext);
- }
- });
- }, function(reason) {
- console.error(reason);
- });
- },
- error: function(e) {
- console.log(e);
- }
- });
- // 隐藏或显示按钮
- if (hrefStr == null) {
- $('#myButton').hide();
- }
- // 按钮点击事件
- $('#myButton').click(function() {
- window.location.href = hrefStr + "/judge_page?recordId=" + encodeURIComponent(recordId);
- });
- });
|