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>

import { useHtmlAsImage } from "howuse/pdf";

const fileArea = ref();
const { downloadImg, loading: loadingImg } = useHtmlAsImage({
  ref: fileArea,
  fileName: "雨巷.png", // 文件名称
});

下载pdf 代码

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

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

打印局部网页代码，调用浏览器打印窗口直接打印

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

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