前端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`);
  });
}
相关推荐
橙序员小站2 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名5 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫5 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊5 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter5 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折5 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_5 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial6 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu6 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端
jiayu6 小时前
Angular6学习笔记13:HTTP(3)
前端