前端处理导出PDF。Vue导出pdf

前言:该篇主要是解决一些简单的页面内容导出为PDF

1.安装依赖

使用到两个依赖,项目目录下运行这两个

javascript 复制代码
//页面转换成图片
npm install --save html2canvas 
//图片转换成pdf
npm install jspdf --save 

2.创建通用工具类exportPdf.js文件

可以保存在工具类目录下;

javascript 复制代码
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export function getPdf(title, id) {
  // 参数校验
  if (!title || !id) {
    console.error('Title and ID are required.')
    return
  }

  const element = document.querySelector(`#${id}`)
  if (!element) {
    console.error(`Element with ID "${id}" not found.`)
    return
  }

  html2Canvas(element, {
    allowTaint: true,
    useCORS: true,
    scale: 2
  }).then(function (canvas) {
    const contentWidth = canvas.width
    const contentHeight = canvas.height

    // A4纸尺寸 (单位: pt)
    const a4Width = 595.28
    const a4Height = 841.89

    // 设置外边距 (单位: pt)
    const marginLeft = 20
    const marginTop = 20
    const marginRight = 20
    const marginBottom = 20

    // 计算可用内容区域
    const availableWidth = a4Width - marginLeft - marginRight
    const availableHeight = a4Height - marginTop - marginBottom

    // 计算缩放比例,使内容宽度适配可用区域
    const scale = availableWidth / contentWidth

    // 按比例计算图像在页面上的尺寸
    const imgWidth = contentWidth * scale
    const imgHeight = contentHeight * scale

    // 计算每页可容纳的高度(考虑上下边距)
    const pageHeight = availableHeight
    let leftHeight = imgHeight
    let position = 0

    const pageData = canvas.toDataURL('image/jpeg', 0.95)
    const PDF = new JsPDF('', 'pt', 'a4')

    if (leftHeight < pageHeight) {
      // 内容高度小于页面可用高度,直接添加图片(带外边距)
      PDF.addImage(pageData, 'JPEG', marginLeft, marginTop, imgWidth, imgHeight)
    } else {
      // 内容高度大于页面可用高度,分页处理
      while (leftHeight > 0) {
        // 添加当前页面图像(带外边距)
        PDF.addImage(pageData, 'JPEG', marginLeft, marginTop + position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= a4Height

        // 如果还有剩余内容,添加新页面
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }

    PDF.save(title + '.pdf')
  }).catch(function (error) {
    console.error('PDF导出失败:', error)
  })
}

3.Demo例子

javascript 复制代码
<template>
    <div>
        <!-- 容器 -->
        <div id="pdfHtml" ref="printHtml">
            <h1>这是一个Demo。</h1>
        </div>
        <button @click="exportPDF">PDF导出</button>
    </div>
</template>
<script>
import { getPdf } from '@/utils/exportPdf';
export default {
    methods: {
        // 导出pdf
        exportPDF() {
            getPdf('关键因素', 'pdfHtml');
        }
    }
}
</script>
相关推荐
Bella_chene18 小时前
Excel转PDF不分页
pdf·excel
RuiyuanZHOU18 小时前
tkinter+pymupdf开发的简单pdf查看编辑器
pdf·tkinter·pymupdf
诗句藏于尽头18 小时前
关于win11的Microsoft To Pdf打印机修改端口后无法再刷新显示于设备界面的问题
pdf
Time_Memory_cici18 小时前
Wiley出版社WileyNJDv5_Template模板编译不能生成PDF解决办法
pdf
wyzqhhhh18 小时前
less和sass
前端·less·sass
Nan_Shu_61420 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel21 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
老华带你飞21 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始21 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible21 小时前
带有渐变光晕
前端·javascript·css