{"id":27398,"date":"2024-11-24T11:41:46","date_gmt":"2024-11-24T03:41:46","guid":{"rendered":"https:\/\/fwq.ai\/blog\/27398\/"},"modified":"2024-11-24T11:41:46","modified_gmt":"2024-11-24T03:41:46","slug":"js-%e6%89%93%e5%8d%b0-html-%e8%a1%a8%e5%8d%95%e6%97%b6%ef%bc%8c%e5%8a%a8%e6%80%81%e4%bf%ae%e6%94%b9%e5%86%85%e5%ae%b9%e6%97%a0%e6%b3%95%e7%94%9f%e6%95%88%e8%af%a5%e5%a6%82%e4%bd%95%e8%a7%a3%e5%86%b3","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/27398\/","title":{"rendered":"JS \u6253\u5370 HTML \u8868\u5355\u65f6\uff0c\u52a8\u6001\u4fee\u6539\u5185\u5bb9\u65e0\u6cd5\u751f\u6548\u8be5\u5982\u4f55\u89e3\u51b3\uff1f"},"content":{"rendered":"

\"JS<\/p>\n

\u5728\u4f7f\u7528 js \u6253\u5370 html \u8868\u5355\u65f6\uff0c\u5185\u5bb9\u66f4\u65b0\u540e\u5982\u679c\u90e8\u5206\u5185\u5bb9\u672a\u751f\u6548\uff0c\u53ef\u80fd\u662f\u56e0\u4e3a\u4f7f\u7528\u4e86\u9519\u8bef\u7684\u65b9\u6cd5\u83b7\u53d6 dom \u5143\u7d20\u7684 html\u3002<\/p>\n

\u5177\u4f53\u95ee\u9898\u5728\u4e8e\uff0c\u4f7f\u7528 prop(“outerHTML”) \u65b9\u6cd5\u83b7\u53d6\u7684\u5143\u7d20 HTML \u4ee3\u7801\u5305\u542b\u4e86\u5143\u7d20\u672c\u8eab\u53ca\u5176\u5b50\u5143\u7d20\uff0c\u4f46\u5982\u679c\u76f4\u63a5\u5c06\u6b64\u4ee3\u7801\u4f5c\u4e3a\u6253\u5370\u7684\u5185\u5bb9\uff0c\u5219\u65e0\u6cd5\u83b7\u53d6\u5230\u52a8\u6001\u4fee\u6539\u540e\u7684\u503c\u3002<\/p>\n

\u8981\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u9700\u8981\u4f7f\u7528 cloneNode \u65b9\u6cd5\u590d\u5236\u4e00\u4efd\u539f\u59cb DOM \u5143\u7d20\uff0c\u7136\u540e\u5c06\u590d\u5236\u7684\u5143\u7d20\u6dfb\u52a0\u5230\u6253\u5370\u6846\u67b6\u4e2d\u3002\u8fd9\u6837\uff0c\u6253\u5370\u65f6\u5c31\u53ef\u4ee5\u83b7\u53d6\u5230\u4fee\u6539\u540e\u7684\u503c\u4e86\u3002<\/p>\n

\u4ee5\u4e0b\u4ee3\u7801\u6f14\u793a\u4e86\u5982\u4f55\u901a\u8fc7 cloneNode \u65b9\u6cd5\u89e3\u51b3\u95ee\u9898\uff1a<\/p>\n

$('#print-iframe').remove(); \/\/ \u6bcf\u6b21\u6253\u5370\u524d\u79fb\u9664\u5148\u524d\u751f\u6210\u7684\u5143\u7d20\n\/\/ \u5f00\u59cb\u6253\u5370\nlet iframe1 = document.createElement('IFRAME');\nlet doc1 = null;\niframe1.setAttribute('id', 'print-iframe');\niframe1.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility: auto;');\ndocument.body.appendChild(iframe1);\nsetTimeout(function () {\n  doc1 = iframe1.contentWindow.document;\n  doc1.body.appendChild(document.querySelector('#divKanZhengPanel-binli').cloneNode(true));\n  doc1.close();\n  iframe1.contentWindow.focus();\n  iframe1.contentWindow.print();\n});<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4f7f\u7528 cloneNode \u65b9\u6cd5\u540e\uff0c\u6253\u5370\u65f6\u5c06\u663e\u793a\u4fee\u6539\u540e\u7684\u8868\u5355\u5185\u5bb9\uff0c\u5305\u62ec textarea \u5185\u5bb9\u548c\u9009\u4e2d\u7684\u590d\u9009\u6846\u3002<\/p>\n
\u7acb\u5373\u5b66\u4e60<\/span>\u201c\u201d\uff1b<\/p>\n
\u4ee5\u4e0a\u5c31\u662fJS \u6253\u5370 HTML \u8868\u5355\u65f6\uff0c\u52a8\u6001\u4fee\u6539\u5185\u5bb9\u65e0\u6cd5\u751f\u6548\u8be5\u5982\u4f55\u89e3\u51b3\uff1f\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728\u4f7f\u7528 js \u6253\u5370 html \u8868\u5355\u65f6\uff0c\u5185\u5bb9\u66f4\u65b0\u540e\u5982\u679c\u90e8\u5206\u5185\u5bb9\u672a\u751f\u6548\uff0c\u53ef\u80fd\u662f\u56e0\u4e3a\u4f7f\u7528\u4e86\u9519\u8bef\u7684\u65b9\u6cd5\u83b7\u53d6 dom \u5143\u7d20\u7684 html\u3002 \u5177\u4f53\u95ee\u9898\u5728\u4e8e\uff0c\u4f7f\u7528 prop(“outerHTML”) \u65b9\u6cd5\u83b7\u53d6\u7684\u5143\u7d20 HTML \u4ee3\u7801\u5305\u542b\u4e86\u5143\u7d20\u672c\u8eab\u53ca\u5176\u5b50\u5143\u7d20\uff0c\u4f46\u5982\u679c\u76f4\u63a5\u5c06\u6b64\u4ee3\u7801\u4f5c\u4e3a\u6253\u5370\u7684\u5185\u5bb9\uff0c\u5219\u65e0\u6cd5\u83b7\u53d6\u5230\u52a8\u6001\u4fee\u6539\u540e\u7684\u503c\u3002 \u8981\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u9700\u8981\u4f7f\u7528 cloneNode \u65b9\u6cd5\u590d\u5236\u4e00\u4efd\u539f\u59cb DOM \u5143\u7d20\uff0c\u7136\u540e\u5c06\u590d\u5236\u7684\u5143\u7d20\u6dfb\u52a0\u5230\u6253\u5370\u6846\u67b6\u4e2d\u3002\u8fd9\u6837\uff0c\u6253\u5370\u65f6\u5c31\u53ef\u4ee5\u83b7\u53d6\u5230\u4fee\u6539\u540e\u7684\u503c\u4e86\u3002 \u4ee5\u4e0b\u4ee3\u7801\u6f14\u793a\u4e86\u5982\u4f55\u901a\u8fc7 cloneNode \u65b9\u6cd5\u89e3\u51b3\u95ee\u9898\uff1a $(‘#print-iframe’).remove(); \/\/ \u6bcf\u6b21\u6253\u5370\u524d\u79fb\u9664\u5148\u524d\u751f\u6210\u7684\u5143\u7d20 \/\/ \u5f00\u59cb\u6253\u5370 let iframe1 = document.createElement(‘IFRAME’); let doc1 = null; iframe1.setAttribute(‘id’, ‘print-iframe’); iframe1.setAttribute(‘style’, ‘position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility: auto;’); document.body.appendChild(iframe1); setTimeout(function () { doc1 = iframe1.contentWindow.document; doc1.body.appendChild(document.querySelector(‘#divKanZhengPanel-binli’).cloneNode(true)); doc1.close(); iframe1.contentWindow.focus(); iframe1.contentWindow.print(); }); \u767b\u5f55\u540e\u590d\u5236 \u4f7f\u7528 cloneNode \u65b9\u6cd5\u540e\uff0c\u6253\u5370\u65f6\u5c06\u663e\u793a\u4fee\u6539\u540e\u7684\u8868\u5355\u5185\u5bb9\uff0c\u5305\u62ec […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-27398","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=27398"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/27398\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=27398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=27398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=27398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}