如何在javascript或angular 4中使用window.print()打印页面时删除页面url

在JavaScript或Angular 4中，可以使用window.print()方法来打印页面。如果你想在打印页面时删除页面URL，可以通过以下步骤实现：

首先，你可以在打印之前使用JavaScript的window.open()方法打开一个新的窗口，并将要打印的内容加载到该窗口中。

var printWindow = window.open('', '_blank');
printWindow.document.write('<html><head><title>Print</title></head><body>' + document.getElementById('yourContentId').innerHTML + '</body></html>');
printWindow.document.close();

上述代码中，yourContentId是你想要打印的内容所在元素的ID。这将在新窗口中加载要打印的内容。

接下来，你可以在新窗口中使用window.print()方法打印页面。

printWindow.print();

最后，你可以在打印完成后关闭新窗口。

printWindow.close();

通过上述步骤，你可以在打印页面时删除页面URL，因为你是在新窗口中打印内容，而不是当前页面。

请注意，这只是一种实现方式，具体取决于你的需求和应用场景。此外，这里没有提及腾讯云的相关产品，因为与打印页面删除URL的功能无直接关联。

相关·内容

【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）

虽然浏览器提供了自己的打印预览和打印功能，但使用 JavaScript 的 window.print() 方法可以更灵活地控制打印内容和样式。...本文洲洲将详细介绍如何使用 window.print() 方法实现网页打印，并提供代码示例。...一、打印基础知识在开始之前，我们需要了解基本的打印流程： 1、用户触发打印操作，这可以是一个按钮点击事件。 2、JavaScript 捕获事件并调用 window.print() 方法。...，写上一个媒介查询也可以达到同样的效果，如： @media print { h1 { font-size: 20px; color: red; } } 2.3 内联样式使用media...属性 // 打印样式 2.4 css中使用@import引入打印样式表 @import url("/path

2172 0

JavaScript打印Excel、Word

JavaScript调用本地打印机，打印Excel、Word文件 ---- 之前写过一篇文章，使用java调用打印机打印Excel文件： java调用打印机：http://blog.csdn.net...---- 解决思路： JavaScript运行在本地，使用JavaScript调用本地打印机。想到可行方法：直接调用打印机打印本地文件(IE浏览器用此方法)。...java后台将Excel转换成html页面，调用window.print()函数打印整个页面(通用); 安装打印插件(麻烦) 使用Spring poi将Excel、Word转换为html再进行打印的好处有...window.print()打印页面： maven依赖： <!...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.9K2 0

jQuery 点击按钮打印指定文本内容

这是在做 JavaScript 调用浏览器打印快递单功能时所遇到的一些坑，总结了一下，分享给大家先大概说下需求，表格里的每一行存储一张订单信息，包括购买的商品、商家信息、联系人信息等等，勾选需要打印的订单...，点击打印按钮，将订单信息填充到快递单模板中，然后 JavaScript 调用浏览器的打印功能，这里只会展示项目中所涉及到的主要代码，完整的代码将不会在这里展示打印页面指定部分通过window.print...();的方法，可以让 JavaScript 打印当前窗口的内容，不过打印的是整个窗口内容，而我们只是需要打印页面的某一个部分，并且该部分的内容是隐藏的，这要怎么实现呢？...// 判断勾选订单是否为空 $.ajax({ url: "{:url('order/index/getOrderGoodsByOrderIds')}",...$(".erweima").empty(); // 当有多张订单需要打印时，需要清空上一订单生成的二维码 $(".erweima").qrcode

4K2 0

HTML打印准考证用JS在html页面实现打印功能

用JS在html页面实现打印功能做项目时，有在网页实现全局和局部打印的需求，百度许久，现总结如下：打印方式一： 1.首先在head里面加入下面一段js代码： <script language="...(); window.document.body.innerHTML=bdhtml; } else { window.print(); } } 2.然后在所需要打印的代码，用和包围着...) value='打印1'> 打印方式二： 1.javascript中方法为： function dayin(){ var userAgent = navigator.userAgent.toLowerCase...= oldstr ; } } 2.页面内容如下： ... ... 3.页面中放置一个打印按钮：

9.6K1 0

html如何打印_html打印代码

首先在head里面加入下面一段js代码： ——————————————— function preview(oper) { if (...(); window.document.body.innerHTML=bdhtml; } else { window.print(); } } ———————————...(1) value=打印1> ——————————————— 另外说明一下，在一个HTML页面里面，可以设置多个打印区域，需要改动一下的就只是几个数字就OK了。...如：在选择第二个区域里面时用包围着，而按钮自然也改成对应的preview(1)了。这样第二区域的打印就完成。...Content-Type”content=”text/html;charset=utf-8″ /> <scriptlanguage=”javascript

12.4K2 0

BOM

导航和打开窗口 window.open(“要加载的URL”, “窗口目标或_slef、_parent、_top或_blank”, “特性字符串”, “新窗口是否取代浏览器历史记录中当前页面的布尔值”);...（2）在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。请参考：JavaScript高级技巧 6....还有两个可以通过JavaScript打开的对话框，即“查找”和“打印”。...// 显示“打印”对话框 window.print(); // 显示“查找”对话框 window.find(); 二、location对象 location是最有用的BOM对象之一，其既是window对象的属性...name=ligang&age=26#top” pathname 返回URL中的目录 “/ligang2585116” port 返回URL中的端口号，如果不存在返回空字符串 “” protocol 返回页面使用的协议

1.3K5 1

BOM

9133 0

反思录：Angular实现svg和png图片下载

在这个项目中，我们需要把页面上的已经存在的svg元素转换成可下载的svg和png链接。svg是矢量图，适合打印成海报；而png清晰度有限，用作在线预览。...适用范围 svg被主流浏览器和svg阅读器支持，canvas只有主流浏览器支持； svg适用于大面积渲染区域的程序和静态文档，如google地图。canvas适合小范围图像密集型场景，如游戏。...接下来要解决的就是如何在component中引用页面上的svg元素并将它转化成png格式的图片。 svg和png图片转换和下载 1....获取元素 Angular中提供一种叫做ViewChild的注解，可以帮助我们引用到页面中的svg元素，此处就是#template....解决@ViewChild未及时刷新问题 @ViewChild取得页面元素可能不是最新的，Angular的Change detection需要时间完成刷新，所以有很短时间的延迟[2]。

2.7K4 0

如何在 ASP.NET MVC 中集成 AngularJS（1）

介绍当涉及到计算机软件的开发时，我想运用所有的最新技术。例如，前端使用最新的 JavaScript 技术，服务器端使用最新的基于 REST 的 Web API 服务。...这是通过减少对服务器的请求数量和减小请求规模，来实现缩短请求负载时间的（如 CSS 和 JavaScript）。压缩技术通过复杂的代码逻辑也使得别人更难的侵入你的 JavaScript 代码。...由于应用开始时会被引导和下载，所以在主页面索引时，AngularJS 会请求所有的 JavaScript 文件和控制器。对于可能包含数百个 JavaScript 文件的大规模应用，这可能不是很理想。...(true); }]); 当你使用 html5Mode 配置 $locationProvider 时，你需要使用 href 标记来指定应用的基本 URL。...自从我决定，将主页面改为 AngularJS 视图，我就使用包含 AngularJS ng-view 标签的 div 标签删除了索引 Razor 视图的所有内容。 <!

7.5K6 0

angular页面打印局部功能实现方法思考

场景在页面显示的时候是分页现实的，当前页面只有10条数据，但是打印需要打印完整的100条数据。并且在当前页面包含了表格之外的标题，菜单等其他元素。...后天api请求都需要带上token信息前台页面跳转到打印页面后再跳回 1、通过缓存传递数据， 2、路由跳转到打印页面， 3、页面获取缓存数据， 4、调用浏览器打印方法， 5、操作完毕页面后退一步...调用打印页面 this.cach.setBylocal({key: key, value: data}); // 写入缓存 this.router.navigate([url, key...或者通过a标签来实现下载和页面显示。并实现打印功能。 3、需要token验证的情况下，使用blob类型来接收数据，并创建一个本地地址供浏览器访问，后面操作如第二步。...效果在iframe页面里调用打印这个方法可以结合前两个方法使用，把前两个页面放在在iframe页面里。略。

1.6K2 0

8分钟为你详解React、Angular、Vue三大框架

4、变换效果当从DOM中插入、更新或删除项目时，Vue提供了多种方法来部署变换效果。这包括了以下工具：自动应用CSS变换和动画的类集成第三方CSS动画库，如Animate.css等。...在变换hooks期间，使用JavaScript直接操作DOM。集成第三方JavaScript动画库，如Velocity.js等。...当在变换组件中的元素被插入或移除时，会出现这样的情况： Vue会自动检测到目标元素是否应用了CSS变换或动画。如果有，CSS变换类将在适当的时间添加/删除。...Vue提供了一个界面，可以根据当前的URL路径来改变页面上显示的内容 – 可以有多种方式（无论是通过电子邮件链接、刷新还是页面内链接）。...此外，当某些浏览器事件发生在按钮或链接上时，使用前端路由器可以有意识地转换浏览器路径。 Vue本身并没有自带前端路由。

22.1K2 0

AngularDart 4.0 高级-安全

本页面介绍了Angular内置的针对常见的Web应用程序漏洞和跨站脚本攻击等攻击的内置保护。它不包括应用程序级别的安全性，如身份验证（此用户是谁？）和授权（此用户可以做什么？）。...当一个值通过属性，属性，样式，类绑定或插值从模板插入到DOM中时，Angular会清理并转义不受信任的值。...消毒取决于上下文：CSS中的无害值在URL中可能是危险的。 Angular定义了以下安全上下文：将值解释为HTML时使用HTML，例如绑定到innerHtml时。...Angular为HTML，Style和URL清理不可信的值; 清理资源URL是不可能的，因为它们包含任意代码。在开发模式中，Angular在消毒过程中必须更改一个值时才会打印控制台警告。...不要使用模板语言在服务器端生成Angular模板; 这样做带来了引入模板注入漏洞的高风险。信任安全值有时应用程序真的需要包含可执行代码，从某个URL显示，或构建潜在的危险URL。

3.6K2 0

JavaScript框架比较：AngularJS vs ReactJS vs EmberJS

JavaScript框架，如Angular.js，Ember.js或React.js，给你的代码带来结构，并保持其有序化，从而使您你的app更灵活，更具可扩展性，并更容易开发。 ?...在HTML文档中创建输入字段时，将为每个已渲染字段创建单独的数据绑定。Angular倾向于在重新渲染之前检查页面上的每个单个绑定字段的任何变化。依赖注入。简单路由。易于测试的代码。...在HTML属性中使用绑定表达式来驱动模板功能。Angular的模板引擎对DOM有着深入的理解，且其结构良好的模板减少了创建结果页面所需的代码总量。...EmberJS：所有的繁重工作 EmberJS是一个用于创建单页面客户端Web应用程序的开源JavaScript应用程序框架，使用Model-View-Controller (MVC)模式。...此框架提供通用数据绑定和URL驱动方法，用于构建不同的应用程序，重点放在可扩展性。 Ember在2007年最初被发布时，叫做SproutCore。

12.6K6 0

前端练级攻略(第二部分)

你可以在执行时跟踪 JavaScript，将调试语句打印到控制台，以及查看网络请求和资源等内容。里有一个关于使用 Chrome 开发工具的教程。如果你使用的 Firefox，可以查看本教程。 ?...选择具有唯一类名的标题标签并更改文本选择页面上的任何元素并将其删除选择任意元素并更改其CSS属性之一 *　选择一个特定的区域标签，并向下移动250像素 *　选择任何组件，如面板，并调整其透明度定义一个名为...Ajax 是一种允许 web 页面使用 JavaScript 与服务器交互的技术 ? 例如，当你在网站上提交表单时，它收集你的输入并发出 HTTP 请求，将数据发送到服务器。...当你在Twitter 上发布一条 tweet 时，你的 witter 客户机向 Twitter 的服务器 API 发出 HTTP 请求，并使用服务器响应更新页面。...Coding Style 代码库我无法强调阅读好的代码是多么有帮助，了解如何在获取新内容时搜索Github的相关存储库。

3.8K0 0

【ASP.NET Core 基础知识】--前端开发--集成前端框架

的主页面 await next(); } }); 处理路由冲突当使用 Angular 路由时，需要确保前端路由和后端路由不会发生冲突。...使用 CDN 加速资源加载将静态资源（如 JavaScript 库、字体、图像等）托管在 CDN 上，以提高资源加载速度。...延迟加载资源将不是立即需要的资源设置为延迟加载，比如图片懒加载、按需加载 JavaScript 等。压缩和缓存使用 Gzip 或 Brotli 等压缩算法来压缩静态资源。...最小化和优化 CSS、JavaScript 和 HTML 删除不必要的空格、注释和换行。将 CSS 放在页面顶部，JavaScript 放在页面底部，以减少阻塞渲染。...可以使用 FTP、SCP 或其他文件传输工具来进行传输。设置 Web 服务器：在Web 服务器上配置好 Web 服务器软件（如 Nginx、Apache 等）。

470 0

JavaScript BOM学习

这不是，整理了一下JavaScript的一下BOM笔记资料，今天贡献出来！...() 打印当前窗口或Frame window.scrollBy()/scrollTo() 滚动当前窗口总的HTML文档 setInterval()/clearInterval() 设置定时器 setTimeout...信息属性特性 kk 整个URL字符串 location.protocol URL的通信协议部分的字符子串 location.hostname URL中服务器名、域名子域名或IP地址 location.port...URL中端口号 location.host hostname + port location.pathname URL中的文件或路径名 location.hash URL中的锚点名称 location.search...URL中表示变量的字符子串 location.reload(true/false) 刷新页面(true/false选择是否从服务器刷新) location.replace(url) 通过url网址刷新当前网页

8832 0

AngularJS系列(十一)——路由和复制

我觉得听夸张，以前这都是后台的控制器来处理的，如servlet，springMVC这类。....when('/printers',{template : '这是打印机页面'}) .otherwise({'redirectTo':'/'})...angular.module('routingDemoApp',['ngRoute']) 3、使用 ngView 指令。...'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'})....when('/printers',{template : '这是打印机页面'}) .otherwise({'redirectTo':'/'})

1.4K2 0

Selenium | 笔记

chrome的—print-to-pdf模式，将请求到html导出为pdf，可参考：http://osask.cn/front/ask/view/1029784 使用js命令'window.print(...如果想隐藏页面，只需要加入—headlss选项即可。...保存pdf driver.get(url) time.sleep(5) # 保存 PDF temp_title = driver.title driver.execute_script('window.print...();') 这里 chrome 打印网页时默认文件名为网页的title，所以这里先保存一下 temp_title=driver.title 改名 os.rename('....应为合法完整url, 如: http://moeci.com OpenQA.Selenium.Navigator.GoToUrl(String url) OpenQA.Selenium.WebDriverException

2.7K4 1

Angular开发实践（六）：服务端渲染

它可以生成这些页面，并在浏览器请求时直接用它们给出响应。它也可以把页面预先生成为 HTML 文件，然后把它们作为静态文件供服务端使用。...Angular Universal 可以为你生成应用的静态版本，它易搜索、可链接，浏览时也不必借助 JavaScript。它也让站点可以被预览，因为每个 URL 返回的都是一个完全渲染好的页面。...提升手机和低功耗设备上的性能有些设备不支持 JavaScript 或 JavaScript 执行得很差，导致用户体验不可接受。...使用 Angular Universal，你可以为应用生成“着陆页”，它们看起来就和完整的应用一样。这些着陆页是纯 HTML，并且即使 JavaScript 被禁用了也能显示。...客户端再一次请求并打印： ? 方法1：使用 TransferHttpCacheModule 使用 TransferHttpCacheModule 很简单，代码不需要改动。

4.7K10 0

Vue学习路线图

单页面应用程序单页面应用程序（SPA）架构通过单个网页实现传统多页面网站一样的功能，而且不会在每次用户触发导航时重新加载和重建页面。...JavaScript 和 Babel 要获得增强的 Vue 开发体验，并利用新的浏览器功能，你可以使用最新的 JavaScript 标准 ES2015 和 ES2016 或更高版本提供的功能来构建 Vue...Vuetify 谷歌的 Material Design 是一个使用十分广泛的页面样式指南，用于构建漂亮的逻辑用户界面，并被用在谷歌的产品（如 Android 和 Web）当中。...动画如果你需要使用动画，那么你需要了解一下 Vue 的过渡系统，它也是 Vue 核心的一部分。你可以通过在向 DOM 添加元素或从 DOM 中删除元素时应用动画。...当向 DOM 中添加元素或从 DOM 中删除元素时，Vue 会检测到这些变更，并在过渡期间添加或删除相应的 CSS 类。

5.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云