html js 打印 圖片不顯示 canvas
出現這個原因是因為 用的是 canvas
我們要將canvas 轉成img 將之前的 canvas 替換掉 !!!

要打印的結構

你們的結構可能和我不一樣, 我的結構是

var ids = document.getElementById(""+id).getElementsByTagName('canvas')[0]; //通過ID 獲取 子元素 canvasvar image = new Image(); //創(chuàng)建IMGimage.src = ids.toDataURL("image/png"); //生成img$("#"+id).html(image) //再將canvas 替換成 img

總體代碼

var osload = function(){$('.rf-qr-p').each(function (letter, rows) { //查詢 canvas 元素 然后 循環(huán)生成二維碼let value = $(rows).data('src');// let id = $(rows).data('id');$(rows).qrcode({text: '' + value,width: 200,height: 200,});catoimg(rows,value) //這里是替換})}var catoimg = function(canvas,id){var ids = document.getElementById(""+id).getElementsByTagName('canvas')[0];var image = new Image();image.src = ids.toDataURL("image/png");$("#"+id).html(image)}

讓我們試一下效果

對比一下現在的元素結構
不顯示前

修改后:

總結

以上是生活随笔為你收集整理的html js 打印 图片不显示 canvas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。