html生成PDF

src/main.js

@@ -44,7 +44,7 @@ import {
   selectDictLabels
 } from '@/utils/ruoyi'
 
-import { dictDataEcho, dictValueLabel, moneyFormat, calculationWeek,getDict } from '@/utils/util'
+import { dictDataEcho, dictValueLabel, moneyFormat, calculationWeek, getDict, getPdf } from '@/utils/util'
 
 // 分页组件
 import Pagination from '@/components/Pagination'
@@ -80,9 +80,7 @@ app.config.globalProperties.dictValueLabel = dictValueLabel
 app.config.globalProperties.moneyFormat = moneyFormat
 app.config.globalProperties.calculationWeek = calculationWeek
 app.config.globalProperties.getDict = getDict
-
-
-
+app.config.globalProperties.getPdf = getPdf
 
 
 // 全局组件挂载

src/utils/util.js

@@ -1,10 +1,8 @@
 import moment from "moment";
-
-import {
-  post,
-  get
-} from "@/utils/request";
+import { post, get } from "@/utils/request";
 import Cookies from "js-cookie";
+import html2canvas from 'html2canvas'
+import JsPDF from 'jspdf'
 
 //根据value值回显字典label值
 export function dictDataEcho(value, arr) {
@@ -103,4 +101,94 @@ export function calculationWeek(val, format) {
   let index = new Date(moment(val, format).format("yyyy-MM-DD")).getDay();
   let week = weekArrayList[index];
   return week;
-}
+}
+
+export function getPdf(title) {
+  // pdfDom 这个就是你vue页面中定义的ID  比如<div id="pdfDom">  这个也要避下雷
+  const element = document.getElementById("pdfDom");
+  window.pageYoffset = 0;
+  document.documentElement.scrollTop = 0;
+  document.body.scrollTop = 0;
+  setTimeout(() => {
+    // const nowDate = new Date();
+    // const date = {
+    //   year: nowDate.getFullYear(),
+    //   month: nowDate.getMonth() + 1,
+    //   date: nowDate.getDate(),
+    //   hours: nowDate.getHours(),
+    //   minutes: nowDate.getMinutes(),
+    //   seconds: nowDate.getSeconds(),
+    // };
+    // const newMonth = date.month > 10 ? date.month : "0" + date.month;
+    // const newDay = date.date > 10 ? date.date : "0" + date.date;
+    // const newMinutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
+    // const newSeconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
+    // const value = date.year + newMonth + newDay + date.hours + newMinutes + newSeconds;
+    let id = "";
+    //创建一个画布    ---  增加导出的pdf水印 ！！
+    let can = document.createElement("canvas");
+    //设置画布的长宽
+    can.width = 400;
+    can.height = 500;
+    let cans = can.getContext("2d");
+    //旋转角度
+    cans.rotate((-15 * Math.PI) / 180);
+    cans.font = "18px Vedana";
+    //设置填充绘画的颜色、渐变或者模式
+    cans.fillStyle = "rgba(200, 200, 200, 0.40)";
+    //设置文本内容的当前对齐方式
+    cans.textAlign = "left";
+    //设置在绘制文本时使用的当前文本基线
+    cans.textBaseline = "Middle";
+    //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
+    //cans.fillText(value, can.width / 8, can.height / 2)
+    let div = document.createElement("div");
+    div.id = id;
+    div.style.pointerEvents = "none";
+    div.style.top = "2000px";
+    div.style.left = "-2000px";
+    div.style.position = "fixed";
+    div.style.zIndex = "100000";
+    div.style.width = document.getElementById("pdfDom").scrollHeight + "px";
+    div.style.height = document.getElementById("pdfDom").scrollHeight + "px";
+    div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
+    document.getElementById("pdfDom").appendChild(div); // 到页面中
+    html2canvas(element, {
+      allowTaint: true,
+      useCORS: true, // 需要注意，element的 高度 宽度一定要在这里定义一下，不然会存在只下载了当前你能看到的页面   避雷避雷！！！
+      scale: 2, // 提升画面质量，但是会增加文件大小
+      height: document.getElementById("pdfDom").scrollHeight,
+      windowHeight: document.getElementById("pdfDom").scrollHeight,
+    }).then(function (canvas) {
+      var contentWidth = canvas.width;
+      var contentHeight = canvas.height;
+      // 一页pdf显示html页面生成的canvas高度;
+      var pageHeight = (contentWidth * 841.89) / 592.28;
+      // 未生成pdf的html页面高度
+      var leftHeight = contentHeight;
+      // 页面偏移
+      var position = 0;
+      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+      var imgWidth = 595.28;
+      var imgHeight = (592.28 / contentWidth) * contentHeight;
+      var pageData = canvas.toDataURL("image/jpeg", 1.0);
+      var pdf = new JsPDF("", "pt", "a4");
+      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+      // 当内容未超过pdf一页显示的范围，无需分页
+      if (leftHeight < pageHeight) {
+        pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
+      } else {
+        while (leftHeight > 0) {
+          pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
+          leftHeight -= pageHeight;
+          position -= 841.89;
+          // 避免添加空白页
+          if (leftHeight > 0) {
+            pdf.addPage();
+          }
+        }
+      }
+      pdf.save(title + ".pdf");
+    });
+  }, 1000);
+}