前端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`);
  });
}
相关推荐
祎直向前11 分钟前
linuxshell循环,条件分支语句
前端·chrome
LongtengGensSupreme11 分钟前
开放所有跨域 ----前端和后端
前端·后端·ajax·vue·api·jquery
我算哪枝小绿植12 分钟前
react实现日历拖拽效果
前端·react.js·前端框架
白粥15 分钟前
【HTML】文本格式化
前端·javascript·html
爱写程序的小高16 分钟前
npm版本降级、nvm切换node版本、webpack版本与vue版本不一致
前端·npm·node.js
sheji341618 分钟前
【开题答辩全过程】以 基于HTML5的移动端网页设计为例,包含答辩的问题和答案
前端·html·html5
jayaccc18 分钟前
前端缓存全解析:提升性能的关键策略
前端·缓存
mario_z23 分钟前
基于kmines类聚线段算法
前端·javascript·算法
干前端28 分钟前
基于PDF.js的安全PDF预览组件实现:从虚拟滚动到水印渲染
javascript·安全·pdf
YJlio31 分钟前
RAMMap 学习笔记(15.2):Processes / Priority / Summary——从“谁在用”和“谁更重要”看物理内存
开发语言·笔记·python·学习·django·pdf·硬件架构