vue3 打印局部网页、网页下载为图片、下载为pdf-自动分页，几行代码搞定

经常有一些需求，要将网页保存为一张图片，感觉异常困难，这里发现一个简单的办法。

这么简单，直接一句哇塞，老板：马上完成任务。

先安装几个依赖

npm i howuse html2canvas jspdf

下载图片代码

 <button @click="downloadImg()">{{ loadingImg ? "正在..." : "" }}下载为图片button>
 <div style="text-align: center" class="howuse-demo-chart" ref="fileArea">
    xxxx 内容，echarts 、表格 随便写
  div>
1
2
3
4

import { useHtmlAsImage } from "howuse/pdf";

const fileArea = ref();
const { downloadImg, loading: loadingImg } = useHtmlAsImage({
  ref: fileArea,
  fileName: "雨巷.png", // 文件名称
});
1
2
3
4
5
6
7

下载pdf 代码

 <button @click="downloadPdf()">{{ loadingPdf ? "正在..." : "" }}下载为Pdfbutton>
 <div style="text-align: center" class="howuse-demo-chart" ref="fileArea">
    xxxx 内容，echarts 、表格 随便写
  div>
1
2
3
4

import { useHtmlAsPdf } from "howuse/pdf";
const fileArea = ref();
// pdfOpts 是pdf的参数
const { downloadPdf, loading: loadingPdf } = useHtmlAsPdf({
  ref: fileArea,
  fileName: "雨巷.pdf",
});
1
2
3
4
5
6
7

打印局部网页代码

<button @click="printPdf()">打印pdfbutton>
 <div style="text-align: center" class="howuse-demo-chart" ref="fileArea">
    xxxx 内容，echarts 、表格 随便写
  div>
1
2
3
4

// pdfOpts 是pdf的参数
const { printPdf, loading } = useHtmlAsPdf({
  ref: fileArea,
  fileName: "雨巷.pdf",
});
1
2
3
4
5