<p>html2canvas tidak menangkap seluruh layar. (Gridster 2)</p>
Hai
Saya menggunakan html2canvas, halaman saya memiliki widget gridster dan setiap widget memiliki laporan. ketika saya mencoba menyiapkan kanvas, saya tidak dapat menangkap semua item di halaman, bahkan yang sepenuhnya berada di area yang terlihat.
print(element: Element, renderer: Renderer2, includeSvgs = true) {
const height = element.clientHeight;
const width = element.clientWidth;
if (includeSvgs) {
this.convertSvgElems(element, renderer);
}
html2canvas(element).then((canvas) => {
let html = '<html><head><title></title></head>';
html += '<body style="width:"' + width + '" ;height:"' + height + '" padding: 0; margin: 0;"';
html += ' onload="window.focus(); window.print(); window.close()">';
html += '<img crossorigin="anonymous" allowTaint = true useCORS=true src="' + canvas.toDataURL() + '" /></body></html>';
const printWindow = window.open('', 'to_print', 'height=700,width=800');
printWindow.document.open();
printWindow.document.write(html);
if (includeSvgs) {
this.deleteCanvasElems(element, renderer);
}
printWindow.document.close();
});
}
deepender87
👍1
Semua 4 komentar
Masalah serupa telah disebutkan
di sini
deepender87
pada 12 Des 2018
Pembaruan: Jika saya menjalankan kode yang sama melalui konsol browser, dalam hal ini berfungsi dengan baik. silakan periksa log yang disebutkan di bawah ini untuk keduanya:
Melalui konsol:
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
jspdf.min.js:5422 495ms html2canvas: Document cloned
jspdf.min.js:5422 497ms html2canvas: Initialized CanvasRenderer with size 1366 x 622
jspdf.min.js:5422 497ms html2canvas: Starting NodeParser
jspdf.min.js:5422 635ms html2canvas: Fetched nodes, total: 2104
jspdf.min.js:5422 636ms html2canvas: Calculate overflow clips
jspdf.min.js:5422 1030ms html2canvas: Start fetching images
jspdf.min.js:5422 1034ms html2canvas: Added image #1 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1037ms html2canvas: Added image #2 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1040ms html2canvas: Added image #3 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1040ms html2canvas: Added image #4 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1042ms html2canvas: Added image #5 <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">…</svg>
jspdf.min.js:5422 1053ms html2canvas: Finished searching images
jspdf.min.js:5422 1063ms html2canvas: Succesfully loaded image #5 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1065ms html2canvas: Succesfully loaded image #4 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1067ms html2canvas: Succesfully loaded image #3 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1068ms html2canvas: Succesfully loaded image #2 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1069ms html2canvas: Succesfully loaded image #1 r {src: svg, image: img, promise: ZoneAwarePromise}
jspdf.min.js:5422 1071ms html2canvas: Images loaded, starting parsing
jspdf.min.js:5422 1072ms html2canvas: Creating stacking contexts
jspdf.min.js:5422 1110ms html2canvas: Sorting stacking contexts
jspdf.min.js:5422 1138ms html2canvas: Render queue created with 3026 items
jspdf.min.js:5422 3316ms html2canvas: Finished rendering
jspdf.min.js:5422 3328ms html2canvas: Cropping canvas at: left: 0 top: 61 width: 1366 height: 561
jspdf.min.js:5422 3340ms html2canvas: Resulting crop with width 1366 and height 561 with x 0 and y 61
jspdf.min.js:5422 3388ms html2canvas: Cleaned up container
Melalui Kode:
0ms html2canvas: html2canvas $npm_package_version
Logger.js:36 1028ms html2canvas: Document cloned, using computed rendering
Logger.js:36 1028ms html2canvas: Starting node parsing
Logger.js:36 1096ms html2canvas: Added image data:image/svg+xml,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20height%3D%2224px%22%20version%3D%221.1%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22di
Logger.js:36 1359ms html2canvas: Finished parsing node tree
Logger.js:36 1496ms html2canvas: Finished loading 11 images (11) [canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, canvas.screenShotTempCanvas, canvas, img]
Logger.js:36 1497ms html2canvas: Starting renderer
Logger.js:36 1498ms html2canvas: Canvas renderer initialized (1366x561 at 0,61) with scale 1
Logger.js:36 1599ms html2canvas: Render completed
Saya juga telah melampirkan gambar untuk kedua kasus:
Mohon perbarui.
Terima kasih
deepender87
pada 13 Des 2018
Saya memecahkan masalah dengan menghapus transisi.
Saya menambahkan aturan css berikut pada lingkup global:
.gridster-item {
transition: unset !important;
}
appick
pada 7 Mar 2019
🚀2
👍2
Pada proyek Angular ketika gridster adalah tag. Tambahkan berikut ke scss global
gridster-item {
transition: unset !important;
}
shashikantj
pada 29 Mei 2020
Apakah halaman ini membantu?
0 / 5 - 0 peringkat
Masalah terkait
yasergh
·
5Komentar
bishwapoudel
·
4Komentar
rrutkows
·
4Komentar
tjchambers32
·
3Komentar
tibewww
·
4Komentar
Komentar yang paling membantu
Saya memecahkan masalah dengan menghapus transisi.
Saya menambahkan aturan css berikut pada lingkup global: