jsPDF 是一個(gè)基于?HTML5?的客戶(hù)端解決方案，用于生成各種用途的 PDF 文檔。
1、安裝：npm install jspdf
? ? ? ? ? ? ? ? ?npm install --save html2canvas
2、引入：import jsPDF from "jspdf"?
????????????????import html2canvas from 'html2canvas'文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-744318.html
3、使用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-744318.html
<template>
<div>
<a-button @click="handelChangeTime">pdf </a-button>
</div>
<div ref="chartRef">
<h2>這里面添加需要導(dǎo)出的內(nèi)容</h2>
<h3>支持表格、文字、圖片、</h3>
<h3>原理就是將html生成為canvas圖片，然后使用jsPDF將圖片轉(zhuǎn)為pdf</h3>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
// 獲取需要轉(zhuǎn)換為PDF的元素 ref
const chartRef = ref()
const handelChangeTime = () => {
// 將元素轉(zhuǎn)換為canvas對(duì)象
html2canvas(chartRef.value).then((canvas) => {
// 將canvas對(duì)象轉(zhuǎn)換為圖像
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF()
const imgProps = pdf.getImageProperties(imgData)
const pdfWidth = pdf.internal.pageSize.getWidth()
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
// 將圖像添加到PDF文件中
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
// 保存PDF文件
pdf.save('exported.pdf')
})
}
</script>
<style lang="less" scoped></style>
到了這里，關(guān)于vue3 ts 導(dǎo)出PDF jsPDF的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
