#javascript #html #charts #google-visualization #export-to-word
#javascript #HTML #Диаграммы #google-визуализация #экспорт в word
Вопрос:
У меня есть HTML-страница, которая включает панель управления Google Charts, которую я пытаюсь экспортировать в файл .docx, используя библиотеку javascript. В настоящее время я пытался использовать библиотеку Export2Doc как таковую:
<script>
function Export2Doc(element, filename = '') {
var preHtml =
"<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
var postHtml = "</body></html>";
var html = preHtml document.getElementById(element).innerHTML postHtml;
var blob = new Blob(['ufeff', html], {
type: 'application/msword'
});
// Specify link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' encodeURIComponent(html);
// Specify file name
filename = filename ? filename '.doc' : 'document.doc';
// Create download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename);
} else {
// Create a link to the file
downloadLink.href = url;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
document.body.removeChild(downloadLink);
}
</script>
<button class="button" onclick="Export2Doc('exportContent', 'Monthly Report');">Word</button>
Где exportContent — <div> и Monthly Report имя экспортируемого файла.
Я также преобразовал свои диаграммы в изображения перед экспортом.
var columnChartB = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart2',
'options': {
'width': 400,
'height': 400,
'allowHtml': true,
'titleTextStyle': {
color: 'grey', // any HTML string color ('red', '#cc00cc')
fontName: 'Roboto', // i.e. 'Times New Roman'
fontSize: '14', // 12, 18 (don't specify px)
bold: false, // true or false
},
vAxis: {
gridlines: {
count: 0
},
textPosition: 'none',
baselineColor: 'transparent'
},
title: 'Number of Projects',
legend: 'none',
colors: ['#FFD700']
},
'view': {
'columns': [1, 2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}]
}
});
// Chart Above as Image
google.visualization.events.addListener(columnChartB, 'ready', function () {
html2canvas($('#chart2').get(0)).then( function (canvas) {
var data = canvas.toDataURL('image/png', 0.9);
var src = encodeURI(data);
document.getElementById('chart2_image').src = src;
});
});
Однако отображаются только легенды и ось, а не столбцы и / или столбцы. (Смотрите пример ниже)
Что я делаю не так?
Ответ №1:
Мне удалось найти решение этой проблемы с помощью библиотеки DOM to image:
<head><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/dom-to-image.min.js'></script></head>
<body>
<script>
// Define a column charts to show financial data
var columnChartA = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {
'width': 600,
'height': 400,
'allowHtml': true
},
legend: {
position: 'top',
alignment: 'center'
},
title: 'Overall Financial Information',
textStyle: {
fontName: 'Roboto',
color: '#00AEEF'
},
colors: ['#00AEEF', '#FF6347', '#32CD32']
},
'view': {
'columns': [1,4,5,6]
}
});
// Chart Above as Image
google.visualization.events.addListener(columnChartA, 'ready', function () {
var node = document.getElementById('chart1');
domtoimage.toPng(node).then (function (dataUrl) {
document.getElementById('chart1_image').src = dataUrl;
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
</script>
</body>
Когда страница экспортируется в виде документа Word, диаграмма затем отображается в виде изображения, как показано ниже:
Ответ №2:
вам не нужна отдельная библиотека, чтобы получить изображение диаграммы.
у диаграммы есть свой собственный метод получения изображения -> getImageURI()
google.visualization.events.addListener(columnChartA, 'ready', function () {
document.getElementById('chart1_image').src = columnChartA.getChart().getImageURI();
});