经常有一些需求,要将网页保存为一张图片,感觉异常困难,这里发现一个简单的办法。
这么简单,直接一句哇塞,老板:马上完成任务。
先安装几个依赖
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",
});