前端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`);
  });
}
相关推荐
Tzarevich17 小时前
深入理解Event Loop:从原理图到代码实战,小白也能看懂的 JS 执行机制
前端·javascript·面试
毛骗导演17 小时前
发送一句「你好」,为什么花掉了几千个 Token?——深读 OpenClaw 的 Context 注入机制
前端·架构
工边页字17 小时前
AI产品中的长期记忆和短期记忆是什么,你知道吗?
前端·人工智能·后端
HelloReader17 小时前
Flutter 页面导航Navigator.push 与自适应导航模式(十四)
前端
小凡同志17 小时前
那个复制粘贴了二十次 loading 的下午
前端·vue.js
HelloReader17 小时前
Flutter 底层原理揭秘框架如何工作(十五)
前端
南篱17 小时前
前端必看:一口气搞懂跨域是什么、为什么、怎么解决
前端·javascript·面试
qq_4061761417 小时前
Vue 插槽与组件传参:从入门到精通
前端·javascript·vue.js
三年三月17 小时前
Redux 技术栈使用总结
前端·react.js
Tody Guo17 小时前
OpenClaw与企业微信的定时任务设定
前端·github·企业微信