Html2canvas выдает ошибку при передаче элемента в LWC ⇐ Jquery
-
Anonymous
Html2canvas выдает ошибку при передаче элемента в LWC
Я пытаюсь создать снимок LWC с помощью html2canvas, но выдает ошибку: «элемент не прикреплен к документу». Ниже приведен код LWC, который я использую: Я также использую highchart для визуализации диаграммы в LWC, и с помощью диаграммы я также хочу получить снимок всего, что находится в основном контейнере
Здесь размещается любой текстовый контент........
Тест
импортировать { LightningElement } из «lwc»; импортируйте {loadScript} из «lightning/platformResourceLoader»; импортировать highchart из @salesforce/resourceUrl/HighChart; импортируйте html2canvas из @salesforce/resourceUrl/html2canvas; импортируйте jsPDF из @salesforce/resourceUrl/jsPDF; класс экспорта по умолчанию ChartForm расширяет LightningElement { рендерингколлбэк(){ Обещание.все([ loadScript(это,высокая диаграмма), loadScript(this,html2canvas), loadScript(this,jsPDF+'/jspdf.umd.min.js'), ]).then(()=>{ это.renderChart(); }).catch(ошибка=>{ console.log('Ошибка загрузки верхнего графика'+ошибка); }); } рендерДиаграмма(){ window.Highcharts.chart(this.template.querySelector('.container'),{ диаграмма:{ тип: 'столбец' }, заголовок:{ текст: «Снимок HighChart» }, хОсь:{ категории:['Col1', 'Col2', 'Col3'], ширина линии сетки: 1, ширина линии: 0 }, yAxis:{ заголовок:{ текст: «Сумма (в миллионах)» } }, ряд:[{ имя: 'Имя столбца', данные: [631 727 800] } }); } генерироватьPDF(){ let elem = this.template.querySelector('.chartContainer'); console.log('ele ==>'+elem); пытаться{ window.html2canvas(elem).then(function (canvas) { console.log('внутри скрипта'); const imgData = Canvas.toDataURL('image/png'); const imgWidth = (canvas.width * 20)/120; const imgHeight = (canvas.height * 20)/120; const {jsPDF} = window.jspdf; const pdf = новый jsPDF("p", "mm", "a4"); pdf.addImage(imgData, 'PNG', 5, 5, imgWidth, imgHeight); pdf.save("highchart.pdf"); }); }поймать(ошибка){ console.log('error==>'+error); } } }
Я пытаюсь создать снимок LWC с помощью html2canvas, но выдает ошибку: «элемент не прикреплен к документу». Ниже приведен код LWC, который я использую: Я также использую highchart для визуализации диаграммы в LWC, и с помощью диаграммы я также хочу получить снимок всего, что находится в основном контейнере
Здесь размещается любой текстовый контент........
Тест
импортировать { LightningElement } из «lwc»; импортируйте {loadScript} из «lightning/platformResourceLoader»; импортировать highchart из @salesforce/resourceUrl/HighChart; импортируйте html2canvas из @salesforce/resourceUrl/html2canvas; импортируйте jsPDF из @salesforce/resourceUrl/jsPDF; класс экспорта по умолчанию ChartForm расширяет LightningElement { рендерингколлбэк(){ Обещание.все([ loadScript(это,высокая диаграмма), loadScript(this,html2canvas), loadScript(this,jsPDF+'/jspdf.umd.min.js'), ]).then(()=>{ это.renderChart(); }).catch(ошибка=>{ console.log('Ошибка загрузки верхнего графика'+ошибка); }); } рендерДиаграмма(){ window.Highcharts.chart(this.template.querySelector('.container'),{ диаграмма:{ тип: 'столбец' }, заголовок:{ текст: «Снимок HighChart» }, хОсь:{ категории:['Col1', 'Col2', 'Col3'], ширина линии сетки: 1, ширина линии: 0 }, yAxis:{ заголовок:{ текст: «Сумма (в миллионах)» } }, ряд:[{ имя: 'Имя столбца', данные: [631 727 800] } }); } генерироватьPDF(){ let elem = this.template.querySelector('.chartContainer'); console.log('ele ==>'+elem); пытаться{ window.html2canvas(elem).then(function (canvas) { console.log('внутри скрипта'); const imgData = Canvas.toDataURL('image/png'); const imgWidth = (canvas.width * 20)/120; const imgHeight = (canvas.height * 20)/120; const {jsPDF} = window.jspdf; const pdf = новый jsPDF("p", "mm", "a4"); pdf.addImage(imgData, 'PNG', 5, 5, imgWidth, imgHeight); pdf.save("highchart.pdf"); }); }поймать(ошибка){ console.log('error==>'+error); } } }
Мобильная версия