效果
主程序
<el-container ref="PdfPage">
<el-button type="primary" data-html2canvas-ignore='true' @click="printPage">打印</el-button>
<el-main>
<el-row ref="Content" :gutter="20">
......
</el-row>
</el-main>
</el-container>
<script>
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default {
name: "Home",
methods: {
printPage() {
const elRef = this.$refs['PdfPage'].$el;
const contentRef = this.$refs['Content'].$el;
const options = {
windowHeight: contentRef.clientHeight + 160,
}
html2canvas(elRef, options)
.then(canvas => {
const [w, h] = [595.28, 841.89];
const [cw, ch] = [canvas.width, canvas.height];
const PDF = new JsPDF('p', 'pt', 'a4');
const pageData = canvas.toDataURL('image/jpeg', 1.0);
PDF.addImage(pageData, 'JPEG', 0, (h - ch / (cw / w)) / 2, w, ch / (cw / w));
PDF.save('00.pdf');
})
},
},
}
</script>
源码
<template>
<el-container class="Home">
<el-aside width="240px">
<el-menu default-active="1-4-1" background-color="transparent">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container ref="PdfPage">
<el-header>
<el-row type="flex" align="middle">
<el-col :span="20">
<el-page-header content="详情页面" />
</el-col>
<el-col :span="4" align="right">
<el-button type="primary" data-html2canvas-ignore='true' @click="printPage">打印</el-button>
</el-col>
</el-row>
</el-header>
<el-main>
<el-row ref="Content" :gutter="20">
<el-col :span="12">
<v-chart class="chart" :option="option1" autoresize />
</el-col>
<el-col :span="12">
<v-chart class="chart" :option="option2" autoresize />
</el-col>
<el-col :span="24">
<v-chart class="chart" :option="option3" autoresize />
</el-col>
</el-row>
</el-main>
<el-footer>Hello Lee!!!</el-footer>
</el-container>
</el-container>
</template>
<script>
import {
use } from "echarts/core";
import {
CanvasRenderer } from "echarts/renderers";
import {
PieChart, LineChart, BarChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
LegendComponent,
ToolboxComponent,
GridComponent,
} from "echarts/components";
import VChart, {
THEME_KEY } from "vue-echarts";
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default {
name: "Home",
components: {
VChart
},
provide: {
[THEME_KEY]: "default"
},
data() {
use([
CanvasRenderer,
LineChart,
PieChart,
BarChart,
TitleComponent,
TooltipComponent,
LegendComponent,
ToolboxComponent,
GridComponent,
]);
return {
option1: {
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: [
"Direct",
"Email",
"Ad Networks",
"Video Ads",
"Search Engines"
]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{
value: 335, name: "Direct" },
{
value: 310, name: "Email" },
{
value: 234, name: "Ad Networks" },
{
value: 135, name: "Video Ads" },
{
value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
},
option2: {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
title: {
text: 'Gradient Stacked Area Chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
bottom: '0',
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Line 1',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
},
emphasis: {
focus: 'series'
},
data: [140, 232, 101, 264, 90, 340, 250]
},
{
name: 'Line 2',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
},
emphasis: {
focus: 'series'
},
data: [120, 282, 111, 234, 220, 340, 310]
},
{
name: 'Line 3',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
},
emphasis: {
focus: 'series'
},
data: [320, 132, 201, 334, 190, 130, 220]
},
{
name: 'Line 4',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
},
emphasis: {
focus: 'series'
},
data: [220, 402, 231, 134, 190, 230, 120]
},
{
name: 'Line 5',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
},
emphasis: {
focus: 'series'
},
data: [220, 302, 181, 234, 210, 290, 150]
}
]
},
option3: (function () {
const builderJson = {
all: 10887,
charts: {
map: 3237,
lines: 2164,
bar: 7561,
line: 7778,
pie: 7355,
scatter: 2405,
candlestick: 1842,
radar: 2090,
heatmap: 1762,
treemap: 1593,
graph: 2060,
boxplot: 1537,
parallel: 1908,
gauge: 2107,
funnel: 1692,
sankey: 1568
},
components: {
geo: 2788,
title: 9575,
legend: 9400,
tooltip: 9466,
grid: 9266,
markPoint: 3419,
markLine: 2984,
timeline: 2739,
dataZoom: 2744,
visualMap: 2466,
toolbox: 3034,
polar: 1945
},
ie: 9743
};
const downloadJson = {
'echarts.min.js': 17365,
'echarts.simple.min.js': 4079,
'echarts.common.min.js': 6929,
'echarts.js': 14890
};
const themeJson = {
'dark.js': 1594,
'infographic.js': 925,
'shine.js': 1608,
'roma.js': 721,
'macarons.js': 2179,
'vintage.js': 1982
};
const waterMarkText = 'ECHARTS';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
let option = {
backgroundColor: {
type: 'pattern',
image: canvas,
repeat: 'repeat'
},
tooltip: {
},
title: [
{
text: '在线构建',
subtext: '总计 ' + builderJson.all,
left: '25%',
textAlign: 'center'
},
{
text: '各版本下载',
subtext:
'总计 ' +
Object.keys(downloadJson).reduce(function (all, key) {
return all + downloadJson[key];
}, 0),
left: '75%',
textAlign: 'center'
},
{
text: '主题下载',
subtext:
'总计 ' +
Object.keys(themeJson).reduce(function (all, key) {
return all + themeJson[key];
}, 0),
left: '75%',
top: '50%',
textAlign: 'center'
}
],
grid: [
{
top: 50,
width: '50%',
bottom: '45%',
left: 10,
containLabel: true
},
{
top: '55%',
width: '50%',
bottom: 0,
left: 10,
containLabel: true
}
],
xAxis: [
{
type: 'value',
max: builderJson.all,
splitLine: {
show: false
}
},
{
type: 'value',
max: builderJson.all,
gridIndex: 1,
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'category',
data: Object.keys(builderJson.charts),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
},
{
gridIndex: 1,
type: 'category',
data: Object.keys(builderJson.components),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}
],
series: [
{
type: 'bar',
stack: 'chart',
z: 3,
label: {
position: 'right',
show: true
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'chart',
silent: true,
itemStyle: {
color: '#eee'
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'component',
xAxisIndex: 1,
yAxisIndex: 1,
z: 3,
label: {
position: 'right',
show: true
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.components[key];
})
},
{
type: 'bar',
stack: 'component',
silent: true,
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: '#eee'
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.all - builderJson.components[key];
})
},
{
type: 'pie',
radius: [0, '30%'],
center: ['75%', '25%'],
data: Object.keys(downloadJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: downloadJson[key]
};
})
},
{
type: 'pie',
radius: [0, '30%'],
center: ['75%', '75%'],
data: Object.keys(themeJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: themeJson[key]
};
})
}
]
};
return option;
})(),
}
},
methods: {
printPage() {
const elRef = this.$refs['PdfPage'].$el;
const contentRef = this.$refs['Content'].$el;
const options = {
windowHeight: contentRef.clientHeight + 160,
}
html2canvas(elRef, options)
.then(canvas => {
const [w, h] = [595.28, 841.89];
const [cw, ch] = [canvas.width, canvas.height];
const PDF = new JsPDF('p', 'pt', 'a4');
const pageData = canvas.toDataURL('image/jpeg', 1.0);
PDF.addImage(pageData, 'JPEG', 0, (h - ch / (cw / w)) / 2, w, ch / (cw / w));
PDF.save('00.pdf');
})
},
},
}
</script>
<style lang="less" scoped>
.Home {
position: relative;
width: 100%;
height: 100%;
.el-header {
background-color: #B3C0D1;
.el-row {
height: 100%;
}
}
.el-footer {
background-color: #B3C0D1;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
}
.el-main {
background-color: #E9EEF3;
}
.chart {
height: 500px;
}
}
</style>