前端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`);
  });
}
相关推荐
lcc18725 分钟前
Vue mixin混入
前端·vue.js
t***L26626 分钟前
终于搞定了!Vue项目打包后白屏问题
前端·javascript·vue.js
u***j32427 分钟前
前端组件通信方式,Vue与React对比
前端·vue.js·react.js
小贺要学前端28 分钟前
【无标题】
前端·javascript·vue·技术趋势
im_AMBER28 分钟前
React 18 用 State 响应输入
前端·react.js·前端框架
前端摸鱼匠30 分钟前
Vue 3 的全局组件注册:讲解如何全局注册组件
前端·javascript·vue.js·前端框架·node.js·ecmascript
lcc1872 小时前
Vue VueComponent
前端·vue.js
摇滚侠3 小时前
Vue 项目实战《尚医通》,预约挂号就诊人组件搭建上,笔记40
前端·javascript·vue.js·笔记
前端互助会6 小时前
Live2D形象展示与文本语音播报:打造生动交互体验的完整实现
前端·vue.js·microsoft·交互
努力的小郑8 小时前
今晚Cloudflare一哆嗦,我的加班计划全泡汤
前端·后端·程序员