download.js
7.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export const mixin = {
data() {
return {
chartList: [],
pdftitle: ''
}
},
methods: {
downLoadpdf(data) {
if (data == 'day') {
let date = document.querySelector('.day-piack').querySelector('input').value;
this.pdftitle = `${date}日报`;
} else if (data == 'week') {
let date = document.querySelector('.week-piack').querySelector('input').value;
this.pdftitle = `${date}周报`;
} else if (data == 'month') {
let date = document.querySelector('.month-piack').querySelector('input').value;
this.pdftitle = `${date}月报`;
} else if (data == 'year') {
let date = document.querySelector('.year-piack').querySelector('input').value;
this.pdftitle = `${date}年报`;
}
document.querySelector('.index').scrollTop = 0;
let chartData = document.querySelectorAll(".dchart");
let headeHtml = document.getElementById('headBox');
document.getElementById('downheader').innerHTML = headeHtml.innerHTML
if (chartData.length > 0) {
for (let i = 0; i < chartData.length; i++) {
let ele = chartData[i];
let obj = {};
obj.id = ele.id;
if (!ele.id) continue;
obj.title = ele.parentElement.querySelector('.ehcarts-title') ? ele.parentElement.querySelector('.ehcarts-title').textContent : ele.parentElement.parentElement.querySelector('.ehcarts-title') ? ele.parentElement.parentElement.querySelector('.ehcarts-title').textContent : "";
obj.src = this.saveFile(ele.id);
let { left: x, top: y } = ele.getBoundingClientRect();
obj.left = x;
obj.top = y - 60;
let { offsetWidth } = document.body;
let { clientWidth, clientHeight } = ele;
//图片相对于1920尺寸的大小
let ratio = 1920 / offsetWidth;
let pw = clientWidth * ratio;
let ph = clientHeight * ratio;
obj.width = pw;
obj.height = ph;
this.chartList.push(obj);
}
}
setTimeout(() => {
this.exportall(document.querySelector("#downloadbox"));
}, 2000);
},
exportall(container, options = {}) {
// 设置放大倍数
const scale = window.devicePixelRatio;
// 传入节点原始宽高
const width = document.querySelector("#downloadbox").scrollWidth;
const height = document.querySelector("#downloadbox").scrollHeight;
// html2canvas配置项
const ops = {
scale,
width,
height,
useCORS: true,
allowTaint: false,
...options,
};
html2canvas(container, ops).then((canvas) => {
let contentWidth = document.querySelector("#downloadbox").scrollWidth;
let contentHeight = document.querySelector("#downloadbox").scrollHeight;
// 返回图片的二进制数据
let pageData = canvas.toDataURL("image/jpeg", 1.0); // 清晰度 0 - 1
let pdf;
if (true) {
// 单页
console.log(contentWidth, "contentWidth");
console.log(contentHeight, "contentHeight");
// jspdf.js 插件对单页面的最大宽高限制 为 14400
let limit = 14400;
if (contentHeight > limit) {
let contentScale = limit / contentHeight;
contentHeight = limit;
contentWidth = contentScale * contentWidth;
}
let orientation = "p";
// 在 jspdf 源码里，如果是 orientation = 'p' 且 width > height 时， 会把 width 和 height 值交换，
// 类似于 把 orientation 的值修改为 'l' , 反之亦同。
if (contentWidth > contentHeight) {
orientation = "l";
}
// orientation Possible values are "portrait" or "landscape" (or shortcuts "p" or "l")
pdf = new jsPDF(orientation, "pt", [contentWidth, contentHeight]); // 下载尺寸 a4 纸 比例
// pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);
} else {
//一页 pdf 显示 html 页面生成的 canvas高度
let pageHeight = (contentWidth / 552.28) * 841.89;
//未生成 pdf 的 html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89]，html 页面生成的 canvas 在pdf中图片的宽高
let imgWidth = 555.28;
let imgHeight = (imgWidth / contentWidth) * contentHeight;
pdf = new jsPDF("", "pt", "a4"); // 下载尺寸 a4 纸 比例
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 20, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
}
this.$emit('downloadSuccess', true);
pdf.save(this.pdftitle + '.pdf');
});
},
fixType(type) {
type = type.toLowerCase().replace(/jpg/i, "jpeg");
let suffix = type.match(/png|jpeg|bmp|gif/)[0];
return "image/" + suffix;
},
saveFile(domId, title) {
let myChart = {};
let chartDom = document.getElementById(domId);
if (this.$echarts.getInstanceByDom(chartDom)) {
myChart = this.$echarts.getInstanceByDom(chartDom);
} else {
myChart = this.$echarts.init(chartDom);
}
let type = "png";
let imgData = myChart.getDataURL({
type: "png",
backgroundColor: "#fff",
});
let img = new Image();
img.src = imgData;
return imgData;
},
},
}