当前位置: 首页 > article >正文

vue3+ts使用html2canvas,jspd导出pdf文件

下载依赖包

npm install html2canvas jspdf

使用

<div ref="pdfContentref" id="content-to-print" class="contengt">
	// 里面编写需要导出的页面
</div>
<el-button @click="exportPdf" type="primary" class="btn">导出PDF</el-button>

引入

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
const pdfContentref = ref<any>(null);

核心代码

const exportPdf = () => {
    const content = pdfContentref.value;
    exportDataPdf(content)
}
const exportDataPdf = (el: any) => {
  html2canvas(el, {
    scale: 3, // 设置缩放
    useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    allowTaint: true,
    logging: false, // 打印日志用的 可以不加默认为false
    backgroundColor: '#ffffff'
  }).then((canvas) => {
    console.log('生成');
    const imgData = canvas.toDataURL('image/jpeg', 1.0);
      console.log(imgData);
      const pdf = new jsPDF();
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('测试.pdf');
    
  })
}

http://www.kler.cn/a/286922.html

相关文章:

  • 等变即插即用图像重建
  • 国产工作平替软件推荐
  • Flink Gauss CDC:深度剖析存量与增量同步的创新设计
  • SentencePiece和 WordPiece tokenization 的含义和区别
  • C#中的语句
  • 【HarmonyOS NEXT】华为分享-碰一碰开发分享
  • AD5270 AD5271 STM32 SPI驱动设计
  • 【数据结构之线性表】
  • VScode应用有哪些?
  • laravel请求第三方接口
  • 华为云 GaussDB 数据库和 MySQL 数据库的区别
  • 多线程篇(ThreadLocal 内存模型 伪共享(ThreadLocal ))(持续更新迭代)
  • 【区块链 + 供应链】广汽本田区块链合同供应链管理系统 | FISCO BCOS应用案例
  • java+Springboot+mysql小区维修管理平台41866-计算机毕业设计项目选题推荐(免费领源码)
  • SMART PLC高速计数器频率测量功能块(脉冲频率测量功能块)
  • Redis 键值对操作全攻略
  • Linux查看jar包错误日志及持久化运行jar包
  • Microsoft 将在 CrowdStrike 服务中断后举办 Windows 安全峰会
  • PyCharm新手指南:快速创建虚拟环境venv的步骤解析
  • cv2图像总结
  • JVM垃圾判定算法
  • react antd点击table行时加选中背景色
  • springboot中文件上传到本地
  • JVM性能监控实用工具jconsole与jvisualvm
  • 硬盘数据恢复软件哪个好用,已整理12款电脑数据恢复工具(收藏)
  • 惊喜!万博智云亮相2024数博会和第三届828 B2B企业节