fixGetPDF.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /*
  2. * @Author: 蒋珅 11455645+jiang-shena@user.noreply.gitee.com
  3. * @Date: 2023-06-12 18:13:48
  4. * @LastEditors: 蒋珅 11455645+jiang-shena@user.noreply.gitee.com
  5. * @LastEditTime: 2023-06-13 16:26:14
  6. * @FilePath: \PowerAnalysis\src\pages\report\fixGetPDF.js
  7. * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  8. */
  9. // 页面导出为pdf格式
  10. import html2Canvas from 'html2canvas';
  11. import jsPDF from 'jspdf';
  12. const htmlToPdf = {
  13. getPdf( loading,title,) {
  14. let dom = document.querySelector('#pdfDom')
  15. let theme = dom.className ==='block' ? false : true
  16. html2Canvas(document.querySelector('#pdfDom'), {
  17. allowTaint: false,
  18. taintTest: false,
  19. logging: false,
  20. useCORS: true,
  21. dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
  22. scale: 4, //按比例增加分辨率
  23. }).then((canvas) => {
  24. var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸,纵向
  25. if (!theme) {
  26. pdf.setDrawColor(4, 12, 11);
  27. pdf.rect(0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), 'F');
  28. }
  29. var ctx = canvas.getContext('2d'),
  30. a4w = 190,
  31. a4h = 272, //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
  32. imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
  33. renderedHeight = 0;
  34. while (renderedHeight < canvas.height) {
  35. var page = document.createElement('canvas');
  36. page.width = canvas.width;
  37. page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
  38. //用getImageData剪裁指定区域,并画到前面创建的canvas对象中
  39. page
  40. .getContext('2d')
  41. .putImageData(
  42. ctx.getImageData(
  43. 0,
  44. renderedHeight,
  45. canvas.width,
  46. Math.min(imgHeight, canvas.height - renderedHeight),
  47. ),
  48. 0,
  49. 0,
  50. );
  51. pdf.addImage(
  52. page.toDataURL('image/jpeg', 1.0),
  53. 'JPEG',
  54. 10,
  55. 10,
  56. a4w,
  57. Math.min(a4h, (a4w * page.height) / page.width),
  58. ); //添加图像到页面,保留10mm边距
  59. renderedHeight += imgHeight;
  60. if (renderedHeight < canvas.height) {
  61. pdf.addPage(); //如果后面还有内容,添加一个空页
  62. if (!theme) {
  63. pdf.setDrawColor(4, 12, 11);
  64. pdf.rect(0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight(), 'F');
  65. }
  66. }
  67. // delete page;
  68. }
  69. //保存文件
  70. pdf.save('发电能力分析' + '.pdf');
  71. // loading = false;
  72. console.log(loading);
  73. });
  74. },
  75. };
  76. export default htmlToPdf;