document.head.innerHTML += this.$store.state.WebSiteData.js，控制台打印不出来

时间: 2023-12-11 07:06:01 浏览: 128

利用js+div来控制打印

4星 · 用户满意度95%

### 利用JavaScript与CSS控制网页打印功能 #### 背景介绍在现代网站开发过程中，有时我们需要为用户提供一种方便、快捷的方式来打印特定的网页内容。这不仅可以提高用户体验，还能帮助用户更有效地保存和分享网页上的信息。通过合理利用JavaScript（简称JS）和CSS，我们可以实现对打印行为的精确控制。 #### 关键技术要点本篇文章将重点讲解如何通过JS与CSS结合的方式，实现在网页中隐藏或显示某些元素，并且只打印出我们希望呈现的部分内容。这涉及到以下几个关键技术点： 1. **CSS媒体查询**：通过`@media print`和`@media screen`选择器，我们可以分别为打印和屏幕展示定义不同的样式规则。 2. **类名的应用**：通过为不希望被打印的元素添加一个特殊的类名（如`.notprint`），然后在CSS中设置相应的显示规则。 3. **JavaScript的动态内容替换**：使用JavaScript可以在页面加载时动态地替换或修改页面内容，确保只有指定的部分被打印。 #### 实现细节 ##### CSS样式定义在CSS中定义两个媒体查询块，分别针对打印预览和屏幕显示的情况进行样式控制： ```css @media print { .notprint { display: none; /* 在打印时隐藏 */ } } @media screen { .notprint { display: inline; /* 在屏幕显示时正常显示 */ cursor: hand; /* 添加手形指针提示用户可以点击 */ } } ``` 这里定义了一个名为`.notprint`的类，用于标记那些不希望出现在打印结果中的元素。在打印预览时这些元素会被隐藏，而在屏幕显示时则正常显示。 ##### HTML结构示例接下来，创建一个基本的HTML结构，并嵌入上述CSS样式： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打印控制示例</title> <style> @media print { .notprint { display: none; } } @media screen { .notprint { display: inline; cursor: hand; } } </style> </head> <body> <div id="printArea">  <p>这是要打印的内容。</p> </div> <button class="notprint" onclick="printPage()">打印页面</button> <script> function printPage() { window.print(); } </script> </body> </html> ``` ##### JavaScript控制为了进一步增强控制能力，可以通过JavaScript来动态替换页面内容或者触发打印事件： ```javascript // 假设有一个外部页面包含需要打印的内容 function prepareForPrint() { var openerDocument = opener.document; // 获取打开当前窗口的文档对象 var printArea = openerDocument.getElementById('printArea'); // 获取需要打印的内容区域 // 替换当前窗口的内容为需要打印的内容 window.document.body.innerHTML = printArea.innerHTML; // 打印完成后关闭窗口 window.print(); window.close(); } // 页面加载完成后执行打印准备 window.onload = prepareForPrint; ``` 以上脚本会将外部页面中的指定内容（即`<div id="printArea">`内的内容）复制到当前页面中，并自动触发打印事件。 #### 总结通过上述方法，我们可以有效地控制哪些内容应该被打印出来，而哪些内容应该被忽略。这种方式不仅能够提供给用户一个更加友好的打印体验，还能帮助开发者更好地管理页面内容的展示。在实际应用中，可以根据具体需求调整CSS和JavaScript代码，以满足更多样化的打印控制需求。

这个问题可能是因为你在控制台打印之前，代码还没有执行完成，所以控制台打印不出来。你可以试试在代码执行完毕之后再去控制台打印。比如可以在代码末尾添加一个 console.log 来打印结果，或者使用 setTimeout 来延迟一段时间再打印。另外，你也可以尝试使用 document.createElement() 来创建一个 script 标签，然后设置其 innerHTML 为 this.$store.state.WebSiteData.js，再将其添加到 head 标签中。这样可能会更可靠一些。

阅读全文

document.head.innerHTML += this.$store.state.WebSiteData.js，控制台打印不出来

相关推荐

js控制台输出的方法(详解)

手机端web调试打印控制台

webBrowser1.Document.Body.InnerHtml 不包含head标签

HTML.zip_html+js+css

JavaScript_LLM自定义聊天机器人控制台.zip

javascript里的document.all用法

javascript中的document.open()方法使用介绍

用javascript实现jquery的document.ready功能的实现代码

web打印控件【lodop4.0.0.1】 控件+Demo

node.js+ajax 实现左右分栏+局部刷新

document.getElementsByName()的用法

一行代码告别document.getElementById

document.updateDOM:随时更新DOM

document.frames在非IE浏览器中的解决办法

document.open() 与 [removed]()的区别

JavaScript 中的 document.getElementById() 使用方法

使用JavaScript语言完成以下两项需求： 1、在控制台或者页面上输出九九乘法表（提示：如果在页面输出可以使用document.write()方法）

最新推荐

webpack教程之webpack.config.js配置文件

Angular程序高效加载与展示海量Excel数据技巧

管理建模和仿真的文件

【SecureCRT高亮技巧】：20年经验技术大佬的个性化设置指南

如何设计一个基于FPGA的多功能数字钟，实现24小时计时、手动校时和定时闹钟功能？

Argos客户端开发流程及Vue配置指南

"互动学习：行动中的多样性与论文攻读经历"

【SecureCRT高亮规则深度解析】：让日志输出一目了然的秘诀

在用友U8 UFO报表系统中，如何通过格式管理功能实现报表的格式与样式自定义？

基于源码的PHP Webshell审查工具介绍

web打印控件【lodop4.0.0.1】控件+Demo