pdf

相对于原生axios解决问题：

• 在原有的jsPDF 基础上封装，解决翻页问题，自动填充页面显示
• 选择元素区域会自动填充整个pdf文档，需要页面自行设置padding间距
• 依赖插件 jspdf html2canvas

安装

pnpm

pnpm add @howuse/pdf jspdf html2canvas

npm

npm i @howuse/pdf jspdf html2canvas

yarn

yarn add @howuse/pdf jspdf html2canvas

<template>
    <div style="margin-bottom: 10px; text-align: center">
        <a-space>
            <el-button @click="downloadImg()">{{ loadingImg ? "正在..." : "" }}下载为图片</el-button>
            <el-button @click="downloadPdf()">{{ loadingPdf ? "正在..." : "" }}下载为Pdf</el-button>
            <el-button @click="printPdf()">打印pdf</el-button>
            <el-button @click="anyPrintPdf()">自定义内容打印pdf</el-button>
        </a-space>
    </div>
    <!-- 如果打印的内容不想呈现给用户，这里可以设置 style="display: none" -->
    <div ref="fileArea2" style="display: none">我是任意内容</div>
    <div style="text-align: center" class="howuse-demo-chart" ref="fileArea">
        <Chart />
        <Water />
    </div>
</template>
<script lang="ts" setup>
import { ElButton } from "element-plus";
import { ref } from "vue";
import Chart from "./chart.vue";
import Water from "./water.md";
import { useHtmlAsImage, useHtmlAsPdf } from "@howuse/pdf";

const fileArea = ref();
const fileArea2 = ref();

// saveCanvasBlob 保存为一个blob流，Promise对象。 0.0.5-beta.2 以上版本
const { downloadImg, saveCanvasBlob, loading: loadingImg } = useHtmlAsImage({
    ref: fileArea,
    fileName: "雨巷.png",
});
// pdfOpts 是pdf的参数
const { downloadPdf, printPdf, loading: loadingPdf } = useHtmlAsPdf({
    ref: fileArea,
    fileName: "雨巷.pdf",
});

// 这个其实是一种思路，当打印任意内容时，可将页面先隐藏，然后打印的时候, 渲染即可。
const { printPdf: anyPrintPdf } = useHtmlAsPdf({
    ref: fileArea2,
    fileName: "任意内容.pdf",
});
</script>
<style scoped>
.howuse-demo-chart {
    max-width: 700px;
    box-shadow: 0 0 5px #000;
    margin: auto;
    padding-top: 10px;
}
</style>