前端PDF导出,使用html2Canvas和jsPDF插件

javascript 复制代码
import html2Canvas from "html2canvas";
import jsPDF from "jspdf";
export function downloadPDF(dom, filename) {
  const scale = 2;
  window.pageYOffset = 0;
  // 滚动到顶部,避免打印不全
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
  html2Canvas(dom, {
    allowTaint: true, 
    scale, 
  }).then((canvas) => {
    console.log("canvas", canvas);
    const contentWidth = canvas.width / scale;
    const contentHeight = canvas.height / scale;
    const pdf = new jsPDF("", "pt", [contentWidth, contentHeight]);
    const pageData = canvas.toDataURL("image/jpeg", 1.0);
    pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);
    pdf.save(`${filename}.pdf`);
  });
}
相关推荐
iCoding9110 分钟前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou3316 分钟前
使用 Service Worker 限制请求并发数
前端
张可爱18 分钟前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine20 分钟前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis30 分钟前
chrome中的axure插件提示无法不受支持
前端·chrome
速易达网络41 分钟前
Vue3 原生移动应用开发来了
前端·javascript·css
GISer_Jing44 分钟前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
励志成为美貌才华为一体的女子1 小时前
本地用docling实现pdf转markdown操作笔记
笔记·pdf
我爱学习_zwj1 小时前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花1 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js