sdfsdfgdsg 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. $(document).ready(function() {
  2. var recordId = requestParam.recordId;
  3. var hrefStr = requestParam.hrefStr;
  4. // 获取PDF容器和设置其样式
  5. var pdfContainer = document.getElementById("pdf-container");
  6. pdfContainer.style.width = 'calc(100% - 20px)'; // 左右间隔10px
  7. pdfContainer.style.margin = '0 auto';
  8. pdfContainer.style.overflow = 'auto'; // 允许滚动
  9. // 调用后端服务获取base64编码的PDF数据
  10. mbos.eas.invokeScript({
  11. name: "commonOSFservice",
  12. param: ['getJobRegistrationPackage', JSON.stringify({ recordId: recordId })],
  13. success: function(res) {
  14. // 后端获取到的base64Data
  15. var base64Data = res.msg;
  16. // 将base64数据转换为PDF.js可以识别的格式
  17. var pdfData = atob(base64Data);
  18. var loadingTask = pdfjsLib.getDocument({data: pdfData});
  19. loadingTask.promise.then(function(pdf) {
  20. // 获取第一页(可以根据需要修改)
  21. pdf.getPage(1).then(function(page) {
  22. var scale = 1.5; // 初始缩放比例,可以根据需要调整
  23. var viewport = page.getViewport({ scale: scale });
  24. // 设置容器的宽度和高度
  25. pdfContainer.style.width = viewport.width + 'px';
  26. pdfContainer.style.height = viewport.height + 'px';
  27. // 创建一个canvas元素来渲染PDF页面
  28. var canvas = document.createElement('canvas');
  29. var context = canvas.getContext('2d');
  30. canvas.height = viewport.height;
  31. canvas.width = viewport.width;
  32. // 将canvas添加到容器中
  33. pdfContainer.appendChild(canvas);
  34. // 渲染PDF页面到canvas上
  35. var renderContext = {
  36. canvasContext: context,
  37. viewport: viewport
  38. };
  39. page.render(renderContext);
  40. // 添加缩放和拖拽功能
  41. var isDragging = false;
  42. var lastScale = scale;
  43. var startX, startY, startScale;
  44. // 缩放事件
  45. canvas.addEventListener('wheel', function(event) {
  46. if (event.deltaY < 0) {
  47. scale *= 1.1;
  48. } else {
  49. scale /= 1.1;
  50. }
  51. renderPage(scale);
  52. });
  53. // 拖拽事件
  54. canvas.addEventListener('mousedown', function(event) {
  55. isDragging = true;
  56. startX = event.clientX - canvas.offsetLeft;
  57. startY = event.clientY - canvas.offsetTop;
  58. startScale = scale;
  59. });
  60. canvas.addEventListener('mousemove', function(event) {
  61. if (isDragging) {
  62. var dx = event.clientX - startX;
  63. var dy = event.clientY - startY;
  64. // 更新canvas的位置
  65. canvas.style.left = dx + 'px';
  66. canvas.style.top = dy + 'px';
  67. }
  68. });
  69. canvas.addEventListener('mouseup', function() {
  70. isDragging = false;
  71. });
  72. canvas.addEventListener('mouseout', function() {
  73. isDragging = false;
  74. });
  75. // 重新渲染页面的函数
  76. function renderPage(newScale) {
  77. viewport = page.getViewport({ scale: newScale });
  78. canvas.width = viewport.width;
  79. canvas.height = viewport.height;
  80. renderContext.viewport = viewport;
  81. page.render(renderContext);
  82. }
  83. });
  84. }, function(reason) {
  85. console.error(reason);
  86. });
  87. },
  88. error: function(e) {
  89. console.log(e);
  90. }
  91. });
  92. // 隐藏或显示按钮
  93. if (hrefStr == null) {
  94. $('#myButton').hide();
  95. }
  96. // 按钮点击事件
  97. $('#myButton').click(function() {
  98. window.location.href = hrefStr + "/judge_page?recordId=" + encodeURIComponent(recordId);
  99. });
  100. });