首页 > 其他分享 >vue前端导出pdf

vue前端导出pdf

时间:2023-09-22 15:35:42浏览次数:38  
标签:el canvas vue const pageHeight 导出 leftHeight pdf

function exportDataPdf(el, fileName, splitClassName) {   // 防止页面数据被切割   const A4_WIDTH = 595   const A4_HEIGHT = 842   el.style.height = 'initial'   const pageHeight = el.scrollWidth / A4_WIDTH * A4_HEIGHT   // 获取分割dom,此处为class类名为item的dom   const domList = document.getElementsByClassName(splitClassName)   // 进行分割操作,当dom内容已超出a4的高度,则将该dom前插入一个空dom,把他挤下去,分割   let pageNum = 1 // pdf页数   const eleBounding = el.getBoundingClientRect()   for (let i = 0; i < domList.length; i++) {     const node = domList[i]     const bound = node.getBoundingClientRect()     const offset2Ele = bound.top - eleBounding.top     const currentPage = Math.ceil((bound.bottom - eleBounding.top) / pageHeight) // 当前元素应该在哪一页     if (pageNum < currentPage) {       pageNum++       const divParent = domList[i].parentNode // 获取该div的父节点       const newNode = document.createElement('div')       newNode.className = 'emptyDiv'       newNode.style.background = 'white'       newNode.style.height = (pageHeight * (pageNum - 1) - offset2Ele + 10) + 'px' // +30为了在换下一页时有顶部的边距       newNode.style.width = '100%'       divParent.insertBefore(newNode, node) //在每一个节点前面插入一个空的新节点,防止内容被分割截断     }   }
  html2canvas(el, {     allowTaint: true,   }).then((canvas) => {     const canvasWidth = canvas.width;     const canvasHeight = canvas.height;     // 一页pdf显示html页面生成的canvas高度;a4纸的尺寸[595.28,841.89],pageHeight是应有高度吗,leftHeight是实际高度吗     const pageHeight = (canvasWidth / 592.28) * 841.89;     // 未生成pdf的html页面高度     let leftHeight = canvasHeight;     // 页面偏移     let position = 0;     // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高     const imgWidth = 595.28;     const imgHeight = (595.28 / canvasWidth) * canvasHeight;

    //toDataURL()方法是返回一个包含图片展示的数据URL。     const pageData = canvas.toDataURL('image/jpeg', 1.0);     const pdf = new jsPDF("", "pt", "a4");     if (leftHeight < pageHeight) {       // 在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;       pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);     } else {       // 分页       while (leftHeight > 0) {         pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);         leftHeight -= pageHeight;         position -= 841.89;         // 避免添加空白页         if (leftHeight > 0) {           pdf.addPage();         }       }     }     // 可动态生成     pdf.save(`${fileName}.pdf`);   }) }   const ele = document.getElementById('content_page');  exportDataPdf(ele, "名称", 'el-table__row')

标签:el,canvas,vue,const,pageHeight,导出,leftHeight,pdf
From: https://www.cnblogs.com/lou-0820/p/17722486.html

相关文章

  • vue el-table-column 内容省略号,根据数字展示内容,鼠标移上展示详情
    鼠标移上展示详情:title="scope.row.fmContent"<el-table-columnprop="fmContent"label="工单内容"<templateslot-scope="scope"><span:title="scope.row.fmContent">scope.row.fmContent.slice(@,22)I&......
  • 如何在SOLIDWORKS PDM中快速导出BOM表
    在SOLIDWORKSPDM中,选择装配体后,下方就可以直接看到该装配体的材料明细表,并直接导出CSV文件,在材料明细表里我们可以去定义我们要输出哪些属性信息,但是不能定义BOM表格的表头样式,所以导出材料明细表之后还要再编辑表头信息,才能够做出符合公司规范的BOM表。今天我们介绍一款工具-SO......
  • HbuilderX将Vue项目打包后的dist,打包成安卓apk安装包
    1、先看这个(必看):https://www.cnblogs.com/lyt520/p/16545806.html2、安装移动端log(如不需要可跳过此步骤)npminstallvconsolemain.js中引入:importVConsolefrom'vconsole'constvConsole=newVConsole()Vue.use(vConsole)3、HBuilderX和逍遥模拟器(用模拟器实现真......
  • Python 实现Word转PDF
    通过将Word文档转换为PDF,您可以确保文档在不同设备上呈现一致,并防止其他人对文档内容进行非授权修改。此外,在你需要打印文档时,转换为PDF还能确保打印输出的准确性。本文将介绍如何使用Python库将Word文档转换为PDF格式。Python将WordDOCX/DOC转换为PDFPython将Word......
  • 关于vue的axios请求的封装
    先加载axiosimportaxiosfrom'axios';importVuefrom'vue';importQsfrom'qs';importurlsfrom'./url'import{ Message}from'element-ui';//用来设置接口请求频繁时候的调用varapi_url;varapi_data;//axios.def......
  • 工具diff-pdf
    比较pdf差别https://vslavik.github.io/diff-pdf/brewinstalldiff-pdf使用diff-pdf--viewa.pdfb.pdf#ordiff-pdf--output-diff=diff.pdfa.pdfb.pdf......
  • ABP + Vue Docker 部署
    #!/bin/bashecho"Welcometodockerbuild"echo""echo""ABP_HOST="abp/host"ABP_NG="abp/ng"cd..echo"Buildingdockerimage$ABP_HOST..."#cd到aspnet-core目录,eg:cd/data/apb/#将aspnet-......
  • vue3 将文件集合下载后导出zip文件
    //注意:文件的url一定是服务器上的地址如http:xxxx//先下载npmijszipfile-saver//封装importJSZipfrom'jszip'importFileSaverfrom'file-saver'constgetFile=(url)=>{returnnewPromise((resolve,reject)=>{//通过请求获取文件blob格式......
  • 基于Java+vue开发的企事业移动培训考试平台
    随着移动互联网的快速发展,越来越多的企业开始关注移动培训和考试平台的开发。为了满足这一需求,我们可以使用Java和Vue来开发一个基于移动端的企事业培训考试平台。获取方式Q+:262086839一、背景和需求企事业移动培训考试平台是一个基于Web的应用程序,旨在提供一个方便、高效的......
  • 【Vue】由0到1深究计算和侦听属性的原理
    hello,我是小索奇,精心制作的Vue系列教程持续更新哈,涵盖大量的经验和示例,由浅入深进行讲解,想要学习&巩固&避坑就一起学习吧~计算和侦听属性计算属性重点概要定义:要用的属性不存在,需要通过已有属性计算得来原理:底层借助了Objcet.defineproperty()方法提供的getter和setter来计算属性计......