最近有如此需求，需要将页面部分内容保存为pdf文件，并下载。最终使用html2canvas和jspdf组合。
思路很简单，先用html2canvas将指定容器的html绘制成canvas，再用jspdf将canvas生成图片，并且塞进pdf文件。
下面说下方法：
先安装插件：
npm i html2canvas jspdf --save
编写代码：为了有视图效果，引入了echarts图表
<template><div><div id="content"><div id="main" style="width:100%;height:400px;"></div><div id="levelImage" style="width:400px;height:400px;"></div></div><button @click="print">打印</button></div></template><script>import jsPDF from "jspdf";import html2canvas from "html2canvas";import * as echarts from "echarts";export default {mounted() {var chartDom = document.getElementById("main");var myChart = echarts.init(chartDom);var option;option = {title: {text: "67",x: "center",y: "center",textStyle: {color: "#4467CB",fontWeight: "bolder",fontSize: 30,},},radar: {// shape: 'circle',radius: 80,name: {// (圆外的标签)雷达图每个指示器名称的配置项。textStyle: {fontSize: 15,color: "#fff",},},indicator: [{ name: "仓位控制", max: 100 },{ name: "行业配置", max: 100 },{ name: "风险控制", max: 100 },{ name: "个股配置", max: 100 },{ name: "风格配置", max: 100 },],},series: [{areaStyle: { color: "#fff", opacity: 1 },type: "radar",symbol: "none",itemStyle: {normal: {color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色lineStyle: {color: "white", // 图表中各个图区域的边框线颜色},},},data: [{value: [90, 64, 80, 58, 60],name: "Allocated Budget",},],},],};option && myChart.setOption(option);function test() {let myChart = echarts.init(document.getElementById("levelImage"));myChart.setOption({title: { text: null }, // 隐藏图表标题legend: { enabled: false }, // 隐藏图例tooltip: {trigger: "axis",},calculable: true,polar: [{nameGap: 5, // 图中工艺等字距离图的距离center: ["50%", "50%"], // 图的位置name: {show: true, // 是否显示工艺等文字formatter: null, // 工艺等文字的显示形式textStyle: {color: "#a3a5b6", // 工艺等文字颜色},},indicator: [{ text: "工艺", max: 100 },{ text: "设备", max: 100 },{ text: "安全", max: 100 },{ text: "工艺", max: 100 },{ text: "仪表", max: 100 },],axisLine: {// 坐标轴线show: false, // 默认显示，属性show控制显示与否},axisLabel: {// 坐标轴文本标签，详见axis.axisLabelshow: false,textStyle: {color: "#247bd7", // 坐标轴刻度文字的样式},},splitArea: {show: true,areaStyle: {color: ["#2a4a93"], // 图表背景网格的颜色},},splitLine: {show: true,lineStyle: {width: 1,color: "#286fbb", // 图表背景网格线的颜色},},},],series: [{name: "完全实况球员数据",type: "radar",symbol: "none", // 去掉图表中各个图区域的边框线拐点itemStyle: {normal: {color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色lineStyle: {color: "white", // 图表中各个图区域的边框线颜色},areaStyle: {type: "default",},},},data: [{value: [50, 42, 88, 60, 90],itemStyle: {normal: {areaStyle: {type: "default",opacity: 0.8, // 图表中各个图区域的透明度color: "#1686c2", // 图表中各个图区域的颜色},},},name: "重整",},{value: [90, 32, 74, 20, 60],itemStyle: {normal: {areaStyle: {type: "default",/*opacity: 1,*/color: "#6eaf97", // 图表中各个图区域的颜色},},},name: "催化",},],},],});}test();},methods: {print() {const downPdf = document.getElementById("content");html2canvas(downPdf).then((canvas) => {var contentWidth = canvas.width;var contentHeight = canvas.height;var pageHeight = (contentWidth / 592.28) * 841.89;var leftHeight = contentHeight;var position = 0;var imgWidth = 595.28;var imgHeight = (592.28 / contentWidth) * contentHeight;var pageData = canvas.toDataURL("image/jpeg", 1.0);var pdf = new jsPDF("", "pt", "a4");if (leftHeight < pageHeight) {pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);} else {while (leftHeight > 0) {pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;if (leftHeight > 0) {pdf.addPage();}}}pdf.save("report_pdf_" + new Date().getTime() + ".pdf");});},},};</script><style scoped>#main {background-color: #4467cb;}</style>
最终效果如图：
