前端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`);
  });
}
相关推荐
dly_blog3 分钟前
Vue 组件通信方式大全(第7节)
前端·javascript·vue.js
枫叶丹411 分钟前
ModelEngine应用编排创新实践:通过可视化编排构建大模型应用工作流
开发语言·前端·人工智能·modelengine
郭小铭14 分钟前
将 Markdown 文件导入为 React 组件 - 写作文档,即时获取交互式演示
前端·react.js·markdown
JAVA+C语言14 分钟前
CSS 继承:核心概念 + 实用解析
前端·css
橙某人16 分钟前
LogicFlow 交互新体验:告别直连,丝滑贝塞尔轨迹实战!🍫
前端·javascript·vue.js
林太白18 分钟前
docker安装以及部署node项目
前端·后端·docker
夏日白云25 分钟前
《PDF解析工程实录》第 8 章|融合策略:不是兜底,而是信息利用率最大化
pdf·llm·大语言模型·rag·文档解析
OpenTiny社区32 分钟前
【博文精读】Chrome CSS 2025年回顾
前端·css
菩提小狗1 小时前
第3天:基础入门-抓包&封包&协议&APP&小程序&PC应用&WEB应用|小迪安全笔记|网络安全|
前端·安全·小程序
雨飞飞雨1 小时前
深度学习响应式系统
前端·vue.js·前端框架