打开一个新的 javascript 窗口(.open) 及其 CSS 样式

2024-02-06

我正在尝试让这个功能在我正在开发的项目的网站上运行。此函数的目的是仅(物理地)打印子 div 的内容,该子 div 巧合地称为选择器 #content。

这是我到目前为止所掌握的一点点:

<script>
    function printContent() {
        window.open().document.write($("#content").html());
        window.print();
        window.close();
    }
</script>

当用户点击“打印”超链接时,该函数就会被触发。新窗口将加载从另一个 HTML 文档解析的 #content div 的内容:

<div id="content">
    <br/>
    <div id="Algemeen">
        <h3>Algemene informatie</h3>
        <fieldset id="profile">
            <img id="male" src="./images/Pixers/male_icon.jpg"></img>
            <img id="female" src="./images/Pixers/female_icon1.jpg"></img>
        </fieldset>
    </div>
    <div id ="leftbox">   
        <div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
        <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
        <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
        <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>  
        <div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
        <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
        <div id ="veldbox"><label>Provincie:</label>$!person.province</div>
        <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
        <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
        <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
        <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
        <div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
    </div>
    <div id="rightbox">
        <div id ="veldbox"><label>Naam instantie:</label></div>
        <div id ="veldbox"><label>Adres instantie:</label></div>
        <div id ="veldbox"><label>Postcode instantie:</label></div>
        <div id ="veldbox"><label>Tel. instantie:</label></div>
        <div id ="veldbox"><label>Fax instantie:</label></div>
        <div id ="veldbox"><label>E-mail instantie:</label></div>
        <div id ="veldbox"><label>Website instantie:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>  
    </div>
</div>

它只是不会随之加载样式。所有内容都将全部显示在左上角。我尝试过通过 JS 链接 CSS,或者按照另一个页面上的建议将其放在页面的头部。当然,我可能做错了。我还没有真正尝试过用 JQuery 解决这个问题,所以如果您有任何其他解决方案可以帮助我解决我的问题,我很高兴并愿意接受有关它们的一些建议。

提前致谢!


在打开的窗口中构建一个完整的 HTML 页面并在其中引用您的 CSS 文件:

var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

打开一个新的 javascript 窗口(.open) 及其 CSS 样式 的相关文章

  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • javascript中按tab键时如何调用函数?

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化?

    很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • JS用正则表达式替换数字

    我有元素的标识符 如下所示 form book 1 2 3 我想要的是用其他值替换该标识符中的第二个数字 我将函数 match 与以下正则表达式一起使用 var regexp d d d 但它返回我包含的数组 1 2 3 2 因此 当我尝试
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • JSTL 在循环中每 5 个字段集创建一个新行

    您好 我目前正在迭代并在表中显示字段集列表 为了让布局变得更得体一些 我想在每次循环到达第五个字段集时创建一个新行 谢谢 JSP div class det table class det tr td td tr table div
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值

随机推荐

  • 使用用户定义的注释生成编译器警告

    是否可以让编译器在遇到用户定义的注释时生成警告 类似的东西 Deprecated注解 Thanks 根据您最初的问题和评论 我假设您正在尝试执行以下操作 将代码标记为不完整 带有编译器警告 以便其他开发人员尚未使用它 稍后识别 IDE 中不
  • 在 python 端在 kivy 中分配 ids

    我正在使用猕猴桃 我想做的是拥有 想法 一个滑块和一个标签 其中包含网格布局中一行中滑块的当前值 现在获取布局很好 但让标签具有与滑块当前值相同的文本值是很棘手的 我尝试使用字符串连接来引用与其配对的滑块具有相同数字后缀的标签 我认为我遇到
  • 跨度文本填充增加跨度大小

    我有以下跨度 span style border solid width 100px hello world span 在我看来 跨度的总宽度是根据填充大小而增加的 有没有办法防止跨度大小增加并将文本填充到右侧 不知道你的 padding
  • Linux 中的缓冲区和高速缓冲存储器有什么区别?

    对我来说 不清楚这两个 Linux 内存概念之间有什么区别 buffer and cache 我已读完这个帖子 https stackoverflow com questions 3192579 buffer and cache diffe
  • 在Python中将数组的数组转换为json[重复]

    这个问题在这里已经有答案了 我有一个数组数组 它 是从数据库查询中获取的SQL炼金术我想做两件事 我想获取列的名称 或类似的名称 从表中选择全名 AS 姓名 我想将最终产品转换为 json 对象数组 以便我可以在前端使用它 我已经搜索了几个
  • 将 .net 方法公开为 Excel 函数?

    我有一组计算方法位于 Net DLL 中 我想让 Excel 2003 用户可以使用这些方法 以便他们可以在电子表格中使用它们 例如我的 net方法 public double CalculateSomethingReallyComplex
  • 查找二进制中类符号的来源

    我有一个有趣的问题 我收到的崩溃日志引用了我的应用程序中名为 NRURLProtocol 的类 特别是在文件 NRURLProtocol m 中 根据崩溃日志 该日志存在于我的应用程序中 而不是存在于 iOS 框架中 但是 我的项目中没有
  • VSCODE 笔记本 - 是否可以仅显示大纲中的 Markdown 标题?

    我使用 Markdown 标题在笔记本中导航 但我也倾向于制作大量 非标题 Markdown 笔记 两者都出现在大纲中 随着笔记本变大 找到正确的标题变得相当困难 有没有办法抑制大纲中显示的普通降价单元格 我关注了 github 和 at
  • 如何将与字段关联的对象列表检索到实体类中?

    当我通过任何字段找到客户时 一切都很顺利 我得到了带有返回的全局对象的 JSON 我正在编写代码来查找Customer由于他们lastName 客户实体有一个对象 其中的字段lastName被宣布 因此 我希望我的端点像第一种情况一样返回客
  • 从 .NET 中的堆栈帧获取参数值?

    我希望能够从 NET中的堆栈帧中获取所有参数值 有点像在 Visual Studio 调试器中查看调用堆栈中的值的方式 我的方法集中于使用堆栈框架类 http msdn microsoft com en us library system
  • 从 iPad (目标 C) 到 MVP Web API (C#) 的时区映射

    我有一个 Web 服务 MVC Web API 我在其中存储 UTC 格式的日期时间值 iPad 与 API 进行通信 并将传递标头中的时区设置 API 会根据 iPad 发送的时区将 UTC 值转换为正确的本地时间 看来我需要 Objec
  • 如何对齐多个表单元素?

    I ve no clue at design and I m trying to get a simple HTML form to look like this 基本上 它是一个表格three输入字段和one提交按钮 关于输入字段 有上面
  • 使用 Complete.ly 或 typeahead 检测并禁用移动设备上的自动完成功能

    在我的项目中我想使用 Complete ly 参见http complete ly appspot com http complete ly appspot com 或 typeahead js 参见http twitter github
  • javascript - 将数组转换为字符串,同时保留括号

    我有一个多维数组 如下所示 var myArray 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 我希望将其内容放在 div 中 以便可以轻松复制和粘贴 然而 当我这样做时 var x document g
  • 在 Visual Studio 中监视调用堆栈大小

    有没有办法监视 Visual Studio 中的调用堆栈大小 运行时会提供一个调用堆栈窗口 但不显示堆栈的大小 我正在使用 C 并面临堆栈溢出问题 我知道我正在使用的某些递归函数可能有问题 但在解决这些问题之前 我想监视调用堆栈大小以了解发
  • 构建 Apache Zeppelin 时出现错误

    我已经用cloudera 设置了hadoop 我想安装 zeppelin 来连接 hive 并为我的查询构建 UI 使用以下命令构建 zeppelin 命令时 sudo mvn clean package Pspark 1 3 Dspark
  • 由 WPF 应用程序托管时,Win32 应用程序不受 dpi 设置的影响

    我正在 wpf 应用程序中作为一个孩子启动一个旧的 win32 应用程序 问题是 win32 应用程序作为 wpf 应用程序的子应用程序运行时会忽略 dpi 设置 当 win32 应用程序在自己的窗口中启动时 dpi 设置可以达到预期的效果
  • 在 ASP.NET MVC 后的 ajax 中包含 antiforgerytoken

    我在使用 ajax 时遇到 AntiForgeryToken 问题 我正在使用 ASP NET MVC 3 我尝试了以下解决方案jQuery Ajax 调用和 Html AntiForgeryToken https stackoverflo
  • xcode 4.4 中的自动属性合成是如何工作的?

    我是 Objective C 和 XCode 的新手 但我很高兴看到 XCode 4 4 现在自动为我合成我的属性 我认为这意味着我不再需要为我的属性输入 synthesize 并且我可以使用以下方式访问它们self propertyNam
  • 打开一个新的 javascript 窗口(.open) 及其 CSS 样式

    我正在尝试让这个功能在我正在开发的项目的网站上运行 此函数的目的是仅 物理地 打印子 div 的内容 该子 div 巧合地称为选择器 content 这是我到目前为止所掌握的一点点 当用户点击 打印 超链接时 该函数就会被触发 新窗口将加载