打印 img 源不是 img 本身不起作用，当来自本地主机的 img 时
当用户单击图像时，我正在尝试打印图像。
当来自互联网的 img 时它可以工作，但当它来自我自己的电脑（本地主机）时它不起作用。但是为什么？
我尝试了很多脚本，但都给了我相同的结果。
提前致谢
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="tab"><img style="width:600px; hieght:600px;" src="https://scontent.fgza6-1.fna.fbcdn.net/v/t1.15752-9/90511757_144802246885621_238915900961456128_n.jpg?_nc_cat=111&_nc_sid=b96e70&_nc_ohc=r3aJA4RgmrIAX9uj7MO&_nc_ht=scontent.fgza6-1.fna&oh=bc1a6cdf63922303eb725277d019cffa&oe=5EA69107" alt="Bald Eagle" />
</div>
<div id="tab2"><img style="width:600px; hieght:600px;" src="http://localhost:8000/storage/images/VW5wb8YGHetqZy8BKcnQuCVGcJwqXgakKViyeuoV.jpeg" alt="Bald Eagle" />
</div>
<p>
<input type="button" value="Print img" onclick="myApp.print()" /> <!-- it's work -->
<input type="button" value="Print img local" onclick="myApp2.printLocal()" /> <!-- it not work !! -->
</p>
</body>
<script>
var myApp = new function () {
this.print = function () {
var tab = document.getElementById('tab');
var win = window.open('', '', 'height=508,width=580');
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}
var myApp2 = new function () {
this.printLocal = function () {
var tab = document.getElementById('tab2');
var win = window.open('', '', 'height=508,width=580');
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}
</script>
</html>
POPMUISE1回答
-
元芳怎么了
我已经在本地主机上尝试了您的代码，它运行良好，我确实给了而不是src="/storage/images/VW5wb8YGHetqZy8BKcnQuCVGcJwqXgakKViyeuoV.jpeg"src="http://localhost:8000/storage/images/VW5wb8YGHetqZy8BKcnQuCVGcJwqXgakKViyeuoV.jpeg"试试运气从文件上载打印.HTML<input type="file" accept="img/*" onchange="fileChanged(event)" /> .JSfunction fileChanged(e){ let file=e.target.files[0]; document.querySelector('#tab2>img').src=window.URL.createObjectURL(file); }<!DOCTYPE html><html><head></head><body> <div id="tab"><img style="width:100px; height:100px;" src="https://scontent.fgza6-1.fna.fbcdn.net/v/t1.15752-9/90511757_144802246885621_238915900961456128_n.jpg?_nc_cat=111&_nc_sid=b96e70&_nc_ohc=r3aJA4RgmrIAX9uj7MO&_nc_ht=scontent.fgza6-1.fna&oh=bc1a6cdf63922303eb725277d019cffa&oe=5EA69107" alt="Bald Eagle" /> </div> <div id="tab2"><img style="width:100px; height:100px;" src="" /> </div> <p> <input type="button" value="Print img" onclick="myApp.print()" /> <!-- it's work --> <input type="file" accept="img/*" onchange="fileChanged(event)" /> <input type="button" value="Print img local" onclick="myApp2.printLocal()" /> <!-- it not work !! --> </p></body><script> var myApp = new function () { this.print = function () { var tab = document.querySelector('#tab>img'); var win = window.open('', '', 'height=508,width=580'); win.document.write(tab.outerHTML); win.document.close(); win.print(); } } function fileChanged(e){ let file=e.target.files[0]; document.querySelector('#tab2>img').src=window.URL.createObjectURL(file); } var myApp2 = new function () { this.printLocal = function () { var tab = document.querySelector('#tab2>img'); var win = window.open('', '', 'height=508,width=580'); win.document.write(tab.outerHTML); win.document.close(); win.print(); } }</script></html>
随时随地看视频慕课网APP
相关分类
Html5