element的描述列表使用

最新推荐文章于 2025-03-19 14:53:20 发布

原创最新推荐文章于 2025-03-19 14:53:20 发布 · 686 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍了如何使用HTML2Canvas和JsPDF库将网页上的内容，如描述列表，转换为PDF文件，包括设置参数、处理多页和导出功能的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


   
  
    
          <el-descriptions :column="3" border>
            <!-- 第一行 -->
            <el-descriptions-item label-class-name="desc-label" content-class-name="desc-content" span="2" label="用人单位名称">
               66666
            </el-descriptions-item>
            <el-descriptions-item span="1" label="费用结算规则">
                777
            </el-descriptions-item>
            <!-- 第二行 -->
            <el-descriptions-item span="1" label="岗位描述">
               888
            </el-descriptions-item>
            <el-descriptions-item span="2" label="工作时间">
                999
            </el-descriptions-item>
            <!-- 第三行 -->
            <el-descriptions-item span="1" label="需求人数">
                10
            </el-descriptions-item>
          </el-descriptions>
       
   
    
        <div id="desc-capture-pdf" style="padding:10px;">
          
         这是导出的内容
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onPrintPng(dialogItem.customername)">导出图片</el-button>
          <el-button type="primary" @click="onPrintPdf(dialogItem.customername)">导出PDF</el-button>
          <el-button @click="dialogShow = false">取 消</el-button>
        </div>
   
 



  import html2canvas from 'html2canvas'
  import JsPDF from 'jspdf'
  
 
      onPrintPdf (pdfName) {
        html2canvas(document.querySelector("#desc-capture-pdf")).then(function (canvas) {
          // const imgData = canvas.toDataURL('image/png', 1.0)
          const contentWidth = canvas.width
          const contentHeight = canvas.height
          // 一页pdf显示html页面生成的canvas高度;
          const pageHeight = (contentWidth / 595.28) * 841.89
          // 未生成pdf的html页面高度
          let htmlHeight = contentHeight
          // pdf页面偏移
          let position = 0
          // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          const imgWidth = 595.28
          const imgHeight = (595.28 / contentWidth) * contentHeight
          const pageData = canvas.toDataURL("image/jpeg", 1.0)
          const pdf = new JsPDF("", "pt", "a4")
          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          // 当内容未超过pdf一页显示的范围，无需分页
          if (htmlHeight < pageHeight) {
            pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight)
          } else {
            while (htmlHeight > 0) {
              pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight)
              htmlHeight -= pageHeight
              position -= 841.89
              // 避免添加空白页
              if (htmlHeight > 0) {
                pdf.addPage()
              }
            }
          }
          // 将内容图片添加到pdf中
          pdf.save(pdfName + ".pdf")
        })
      },
      onPrintPng (name) {
        // 把打印的内容截取出来
        // let header = `<html><head><title></title></head><body>`
        // let footer = `</boby></html>`
        // let content = document.querySelector('.desc-pdf').innerHTML
        // console.log(content)
        // 打印结构
        // document.boby.innerHTML = header + content + footer
        // window.print()
        html2canvas(document.querySelector("#desc-capture-pdf")).then(function (canvas) {
          // document.body.appendChild()
          // window.print()
          const imgData = canvas.toDataURL('image/png', 1.0)
          // console.log(imgData)
          // canvas.
          // 生成一个a元素
          const a = document.createElement('a')
          // 创建一个单击事件
          const event = new MouseEvent('click')
  
          // console.log(name)
          // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
          a.download = name
          // 将生成的URL设置为a.href属性
          a.href = imgData
  
          // 触发a的单击事件
          a.dispatchEvent(event)
        })
        // window.location.reload()
      },