angular - Dom-to-image 仅打印第一张图表 ionic 4
问题描述
我有一个 Ionic 页面（第 2 页），它从上一页（第 1 页）接收 id 号、开始日期和结束日期，将 JSON 发送到 API 并接收两个数组：一个用于日期，一个用于测量。然后，将数组放入图表中并显示。
当用户单击“打印到 pdf”按钮时，dom-to-image 库将放置图形的画布转换为 png 图像，并将其放入生成的 PDF 文件中，该文件最终存储在用户设备中。
如果用户按下“打印到 pdf”按钮一次，则该过程可以正常工作。
如果用户按下“打印到pdf”按钮一次，收到pdf，返回第1页，输入其他日期重新计算图形并再次按下“打印到pdf”按钮，pdf中显示的图形是以前的，不是新生成的。但是，屏幕上显示的图形是新生成的……</p>
这里是图人口的代码：
(loadQuarantineStatsDefault()) 在 ionViewWillEnter() 中加载
loadQuarantineStatsDefault(){
return new Promise(resolve => {
let body = {
serial_numb : this.serial_number,
fecha_inicio : this.fecha_inicio,
fecha_final : this.fecha_final
};
this.postPvdr.postData(body, 'proses_tower.php').subscribe(array_data => {
this.array_data = array_data['array_data'];
resolve(true);
for(var i:number=0; i<this.array_data.length; i++){
this.array_dates[i] = this.array_data[i]['fecha_hora'];
this.array_co2[i] = this.array_data[i]['co2'];
this.array_tvoc[i] = this.array_data[i]['tvoc'];
this.array_temperature[i] = this.array_data[i]['temperature'];
this.array_humidity[i] = this.array_data[i]['humidity'];
}
this.array_dates.reverse();
this.array_co2.reverse();
this.array_tvoc.reverse();
this.array_temperature.reverse();
this.array_humidity.reverse();
if(this.data_selector=="co2"){
this.array_selected_data = this.array_co2;
this.array_label = 'Medición de CO₂ (ppm)';
this.backgroundColor1 = 'white';
this.yAxisSegement1 = 0;
this.backgroundColor2 = 'white';
this.yAxisSegement2 = 0;
this.backgroundColor3 = 'white';
this.yAxisSegement3 = 0;
this.backgroundColor4 = 'white';
this.yAxisSegement4 = 0;
this.backgroundColor5 = 'rgb(0, 184, 175, 0.4)';
this.yAxisSegement5 = 600;
this.backgroundColor6 = 'rgb(255, 235, 59, 0.4)';
this.yAxisSegement6 = 1000;
this.backgroundColor7 = 'rgb(255, 152, 0, 0.4)';
this.yAxisSegement7 = 1500;
this.backgroundColor8 = 'rgb(255, 87, 34, 0.4)';
this.yAxisSegement8 = 2500;
this.backgroundColor9 = 'rgb(229, 57, 53, 0.4)';
this.yAxisSegement9 = Infinity;
}
if(this.data_selector=="tvoc"){
this.array_selected_data = this.array_tvoc;
this.array_label = 'Medición de TVOC (ppb)';
this.backgroundColor1 = 'white';
this.yAxisSegement1 = 0;
this.backgroundColor2 = 'white';
this.yAxisSegement2 = 0;
this.backgroundColor3 = 'white';
this.yAxisSegement3 = 0;
this.backgroundColor4 = 'white';
this.yAxisSegement4 = 0;
this.backgroundColor5 = 'rgb(0, 184, 175, 0.4)';
this.yAxisSegement5 = 333;
this.backgroundColor6 = 'rgb(255, 235, 59, 0.4)';
this.yAxisSegement6 = 1000;
this.backgroundColor7 = 'rgb(255, 152, 0, 0.4)';
this.yAxisSegement7 = 3333;
this.backgroundColor8 = 'rgb(255, 87, 34, 0.4)';
this.yAxisSegement8 = 8332;
this.backgroundColor9 = 'rgb(229, 57, 53, 0.4)';
this.yAxisSegement9 = Infinity;
}
if(this.data_selector=="temperatura"){
this.array_selected_data = this.array_temperature;
this.array_label = 'Medición de Temperatura (ºC)';
this.backgroundColor1 = 'rgb(229, 57, 53, 0.4)';
this.yAxisSegement1 = 9;
this.backgroundColor2 = 'rgb(255, 87, 34, 0.4)';
this.yAxisSegement2 = 11;
this.backgroundColor3 = 'rgb(255, 152, 0, 0.4)';
this.yAxisSegement3 = 17;
this.backgroundColor4 = 'rgb(255, 152, 0, 0.4)';
this.yAxisSegement4 = 18;
this.backgroundColor5 = 'rgb(0, 184, 175, 0.4)';
this.yAxisSegement5 = 25;
this.backgroundColor6 = 'rgb(255, 152, 0, 0.4)';
this.yAxisSegement6 = 26;
this.backgroundColor7 = 'rgb(255, 152, 0, 0.4)';
this.yAxisSegement7 = 31;
this.backgroundColor8 = 'rgb(255, 87, 34, 0.4)';
this.yAxisSegement8 = 33;
this.backgroundColor9 = 'rgb(229, 57, 53, 0.4)';
this.yAxisSegement9 = Infinity;
}
if(this.data_selector=="humedad"){
this.array_selected_data = this.array_humidity;
this.array_label = 'Medición de Humedad (%)';
this.backgroundColor1 = 'rgb(229, 57, 53, 0.4)';
this.yAxisSegement1 = 15;
this.backgroundColor2 = 'rgb(255, 87, 34, 0.4)';
this.yAxisSegement2 = 20;
this.backgroundColor3 = 'rgb(255, 152, 0, 0.4)';
this.yAxisSegement3 = 35;
this.backgroundColor4 = 'rgb(255, 235, 59, 0.4)';
this.yAxisSegement4 = 40;
this.backgroundColor5 = 'rgb(0, 184, 175, 0.4)';
this.yAxisSegement5 = 50;
this.backgroundColor6 = 'rgb(255, 235, 59, 0.4)';
this.yAxisSegement6 = 60;
this.backgroundColor7 = 'rgb(255, 152, 0, 0.4)';
this.yAxisSegement7 = 65;
this.backgroundColor8 = 'rgb(255, 87, 34, 0.4)';
this.yAxisSegement8 = 80;
this.backgroundColor9 = 'rgb(229, 57, 53, 0.4)';
this.yAxisSegement9 = Infinity;
}
if(this.serial_numb_confirm==undefined || this.tower_name == undefined){
this.loadQuarantineStatsDefault(this.username);
}
if (this.bars) this.bars.destroy();
this.bars = new Chart(this.barChart.nativeElement, {
type: 'line',
data: {
labels: this.array_dates,
datasets: [{
label: this.array_label,
data: this.array_selected_data,
backgroundColor: 'rgb(27, 18, 64, 0.0)',
borderColor: '#00b8af',
borderWidth: 3,
pointBackgroundColor:'rgba(0, 0, 0, 0.1)',
pointBorderWidth: 1,
pointHitRadius: 8,
pointHoverBorderWidth: 1,
pointHoverRadius: 4,
pointRadius: 3,
}]
},
options: {
title: {
display: true,
text: 'TOWER "' + this.tower_name + '" (' + this.serial_numb_confirm + ')'
},
backgroundRules: [{
backgroundColor: this.backgroundColor1,
yAxisSegement: this.yAxisSegement1
}, {
backgroundColor: this.backgroundColor2,
yAxisSegement: this.yAxisSegement2
}, {
backgroundColor: this.backgroundColor3,
yAxisSegement: this.yAxisSegement3
}, {
backgroundColor: this.backgroundColor4,
yAxisSegement: this.yAxisSegement4
}, {
backgroundColor: this.backgroundColor5,
yAxisSegement: this.yAxisSegement5
}, {
backgroundColor: this.backgroundColor6,
yAxisSegement: this.yAxisSegement6
}, {
backgroundColor: this.backgroundColor7,
yAxisSegement: this.yAxisSegement7
}, {
backgroundColor: this.backgroundColor8,
yAxisSegement: this.yAxisSegement8
}, {
backgroundColor: this.backgroundColor9,
yAxisSegement: this.yAxisSegement9
}],
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
ticks: {
beginAtZero: true,
autoSkip: true,
maxRotation: 90,
minRotation: 90,
maxTicksLimit: 24
}
}]
}
},
plugins: [{
beforeDraw: function (chart) {
var ctx = chart.chart.ctx;
var ruleIndex = 0;
var rules = chart.chart.options.backgroundRules;
var yaxis = chart.chart.scales["y-axis-0"];
var xaxis = chart.chart.scales["x-axis-0"];
var partPercentage = 1 / (yaxis.ticksAsNumbers.length - 1);
for (var i = yaxis.ticksAsNumbers.length - 1; i > 0; i--) {
if (yaxis.ticksAsNumbers[i] < rules[ruleIndex].yAxisSegement) {
ctx.fillStyle = rules[ruleIndex].backgroundColor;
ctx.fillRect(xaxis.left, yaxis.top + ((i - 1) * (yaxis.height * partPercentage)), xaxis.width, yaxis.height * partPercentage);
} else {
ruleIndex++;
i++;
}
}
}
}]
});
});
});
}
这里将图形保存为 pdf 的代码：
public saveGraph() {
var div = document.getElementById("barChart");
console.log('div', div);
var options = { background: "white", quality: 0.99, height: 800, width: 800, cacheBust: true};
domtoimage.toPng(div, options).then((dataUrl)=> {
//Initialize JSPDF
var doc = new jspdf("p","mm","a4");
//Add image Url to PDF
var graph = new Image();
graph.src = dataUrl;
doc.addImage(graph, 'PNG', 20, 40, 170, 128);
var img = new Image();
img.src = 'https://xx.com/xx/logos/color_compressed.png';
doc.addImage(img, "PNG", 163, 5, 40, 23);
let pdfOutput = doc.output();
// using ArrayBuffer will allow you to put image inside PDF
let buffer = new ArrayBuffer(pdfOutput.length);
let array = new Uint8Array(buffer);
for (var i = 0; i < pdfOutput.length; i++) {
array[i] = pdfOutput.charCodeAt(i);
}
//This is where the PDF file will stored , you can change it as you like
// for more information please visit https://ionicframework.com/docs/native/file/
const directory = this.file.dataDirectory ;
const fileName = "Exportación_gráfico_mediciones.pdf" + new Date().getTime();
let options: IWriteOptions = { replace: true };
//Writing File to Device
this.file.writeFile(directory,fileName,buffer, options)
.then((success)=> {
console.log("File created Succesfully" + JSON.stringify(success));
this.fileOpener.open(this.file.dataDirectory + fileName, 'application/pdf')
})
.catch((error)=> {
console.log("Cannot Create File " +JSON.stringify(error));
});
//Writing File to Device
this.file.writeFile(directory,fileName,buffer)
.then((success)=> {
console.log("File created Succesfully" + JSON.stringify(success));
this.fileOpener.open(this.file.dataDirectory + fileName, 'application/pdf')
.then(() => console.log('File is opened'))
.catch(e => console.log('Error opening file', e));
})
.catch((error)=> {
console.log("Cannot Create File " +JSON.stringify(error));
});
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
这是HTML代码：
<div id="graphcontainer" style="height: 68%">
<canvas width=643 height=484 id="barChart" #barChart></canvas>
</div>
解决方案
推荐阅读
- reactjs - React Hooks State 只更新一次 Type:error not a function
- jpa - Spring Data JPA 方法在限制 ResultSet 时抛出 'org.springframework.dao.InvalidDataAccessResourceUsageException' 异常
- php - 如何为每个用户计算收到的通知计数
- c++ - 使用 std::ifstream 从不断增长的文件中读取失败
- python - Beautiful Soup 4 在将其转换为“html”或“lxml”后会删除所有内容？
- php - Large amount of data. Best way to iterate over, without getting memory exhaustion?
- php - 发送用户名和密码到用户的邮箱 Laravel
- vue.js - sass-loader 多次注入样式
- security - 更新密码流程
- javascript - React 应用程序在使用 react-scripts start 运行时工作正常，但在构建时得到“Unexpected SyntaxError: Unexpected Token: <”