开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Blazor WASM中的window.print

是一个用于在浏览器中打印当前页面的JavaScript API。它允许开发人员通过调用该API来触发浏览器的打印功能，将页面内容打印出来。

Blazor是一个由微软开发的用于构建现代Web应用程序的开源框架。Blazor使用C#语言和.NET运行时在浏览器中运行，通过WebAssembly技术实现。Blazor WASM（WebAssembly）是Blazor的一种部署模式，它将应用程序的代码编译为WebAssembly格式，然后在浏览器中运行。

使用window.print可以在Blazor WASM应用程序中实现打印功能。开发人员可以在需要打印的页面或组件中调用window.print方法，以触发浏览器的打印对话框。用户可以选择打印机、设置打印选项，并最终将页面内容打印出来。

Blazor WASM中的window.print的应用场景包括但不限于：

打印报表或文档：开发人员可以在Blazor应用程序中生成报表或文档，并通过window.print将其打印出来，方便用户保存或分享。
打印表单或票据：在需要生成表单或票据的场景中，开发人员可以使用Blazor WASM中的window.print来实现打印功能，方便用户获取纸质副本。
打印预览：通过调用window.print，开发人员可以在浏览器中展示打印预览，让用户在打印之前查看页面的布局和内容。

腾讯云提供了一系列与Web应用程序开发和部署相关的产品，以下是一些推荐的腾讯云产品和产品介绍链接地址，可以帮助开发人员在Blazor WASM中实现打印功能：

腾讯云云服务器（CVM）：提供可靠的云服务器实例，用于部署和运行Blazor WASM应用程序。了解更多：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：用于存储和管理应用程序中的静态资源，如打印模板、图片等。了解更多：https://cloud.tencent.com/product/cos
腾讯云CDN加速：加速静态资源的分发，提高Blazor WASM应用程序的加载速度和用户体验。了解更多：https://cloud.tencent.com/product/cdn
腾讯云API网关：用于构建和管理API接口，方便与Blazor WASM应用程序进行集成和通信。了解更多：https://cloud.tencent.com/product/apigateway

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Blazor wasm 其实也挺快！

之前第一篇的时候，因为没有用任意配置，导致wasm加载很慢，我就感觉不会是这样的，为了不误导小盆友，所以还是趁着周末研究了一波，做了相关的调整，经过测试，速度基本可观了，移动端也能轻松驾驭。万岁！...那如何去配置呢，很简单，官方已经有了，只需要我们创建wasm的时候，勾选下就行了：操作2：Ngxin gzip压缩因为我们的wasm项目，每次刷新需要用到很多dll的资源文件，所以我们需要在nginx...中进行压缩处理，官方也建议我们这么做的： https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/?...注意：如果作为http server来使用，主配置文件中要包含文件类型配置文件最后我的nginx.conf配置文件是这样的： # For more information on configuration...4、结果对比服务端项目地址：mvp.neters.club wasm项目地址：neters.club:5211 总体来说，我经过刷新三次后的响应时间分别是：（wasm模式总大小6m，最终时间1.73s

1.1K2 0

Blazor WASM 实现人民币大写转换器

Blazor Blazor 是 .NET Core 时代微软推出的用于 Web 应用开发的新框架，它可以运行在服务器端，也可使用 WASM 运行在客户端，即浏览器中。...创建 Blazor WASM 工程我们可以使用 Visual Studio 2019 创建 Blazor WASM 工程。 ? 选择 Blazor WebAssembly App 就可以了 ?...一个 Blazor WASM 项目的典型结构如上图。Program.cs 包含应用如何启动与承载的逻辑。 wwwroot 中的文件为纯 HTML/CSS/JS 文件，不包含.NET的逻辑。...但在今年即将发布的 .NET 6 版本中，Blazor 会迎来官方最纯正的本地应用支持。只要不出自 SilverLight、Zune、WP、WinRT、UWP 团队之手，就不会被坑！...现存的问题 Blazor WASM 虽然看着香，但目前有一些痛点还有待解决。

2.2K1 0

Visual Studio 中的 Blazor WebAssembly 与Blazor Server 项目模板区别

在 Visual Studio 中，有两种主要的 Blazor 项目模板：Blazor WebAssembly 和 Blazor Server。...Blazor WebAssembly 是将 .NET 运行时嵌入到浏览器中，并通过下载和运行本地编译好的 .NET 程序集来实现客户端代码的执行。...另一方面，Blazor Server 模板则采取了不同的方法。...如果你希望构建一个独立运行、功能丰富且完全脱机可访问的应用程序，则 Blazor WebAssembly 是一个很好的选择。...此外，在大型团队协作开发环境中也常会选择 Blazor Server 模式，因为所有业务逻辑都位于服务器上进行处理与验证。

2221 0

Blazor 中的依赖项注入

依赖注入（DI）是一种通过关注点分离来促进软件松散耦合的技术。在 Blazor 应用程序的上下文中，DI 鼓励你为特定任务开发离散服务，然后将这些服务注入到需要使用其功能的组件和类中。...Blazor 中的服务 Razor 组件主要与 UI 表示有关。生成 UI 所涉及的部分工作通常涉及与数据存储进行通信，可能是通过 Web 服务。可能需要记录组件中的操作和事件。...注册通常发生在应用程序的 Program 类中的 Main 方法中，其中应用程序的 ServiceCollection 可以通过 WebAssemblyHostBuilder 的 Services 属性访问...单一实例Singleton：在应用程序的生命周期中只创建一个服务实例。所有用户在Blazor Server应用程序中共享同一个实例。...作用域Scoped：在Blazor Server应用程序中，注册为scoped的服务的范围是当前（SignalR）连接（或用户）。作用域服务在WebAssembly应用程序中注册为单例。

1341 0

.NET8 Blazor的Auto渲染模式的初体验

，一个明显的变化是，.NET8中的blazor通过添加插件方式开启了Blazor Server与WebAssembly两种交互方式。...首先，请将devtools中Application Tab页中的Cache Storage清空，防止已缓存的wasm文件影响测试效果。...然后，可以通过devtools中的request blocking功能先将wasm全部block。...我们可以发现虽然wasm都请求失败，但是Auto模式采用Blazor Server的方式通信，在点击按钮后，交互仍然生效然后我们可以去掉对wasm的block，重新刷新页面，并点击Counter按钮后...，wasm交互也生效结论因此验证Auto模式下，在wasm下载未完成或失败的情况下，使用Blazor Server方式交互。

4114 0

Blazor资源大全，很棒的Blazor（1）

Blazor BFF Azure AD[48] - - 此模板可用于创建一个在ASP.NET Core Web应用程序中托管的Blazor WASM应用程序，使用Azure AD和Microsoft.Identity.Web...Blazor BFF Azure B2C[50] - - 此模板可用于创建一个在ASP.NET Core Web应用程序中托管的Blazor WASM应用程序，使用Azure B2C和Microsoft.Identity.Web...Blazor Wasm with ASP.NET Framework 4.x[98] - 通过一些调整和限制，您可以在Net Framework 4.x或其他环境中运行Blazor Wasm。...待办事项 TodoApi by David Fowler[121] - David Fowler在.NET 7中创建的待办事项应用程序，包括一个基于ASP.NET Core托管的Blazor WASM...FFmpegBlazor[143] - FFmpegBlazor提供了在Blazor Wasm C#中利用ffmpeg.wasm的能力。

4025 0

Blazor 中的路由和路由模板

路由模板路由是将 URL 与已知 URL 模式列表绑定在一起的过程。在 Blazor 中，URL 模式或路由模板被收集在路由表中。...在 ASP.NET 中，路由参数被分配给匹配的控制器方法的形参。在 Blazor 中，情况略有不同但具有可比性。...在 Blazor 中，路由器参数会自动分配给使用 [Parameter] 属性注释的组件的属性。根据参数和属性的名称进行匹配。...若要通过 Blazor 页面中的代码进行导航，应首先为 IUriHelper 抽象类型注入已配置的依赖项。...但是，在 Blazor 中，路由器可以在不离开客户端的情况下进行导航，无需从服务器完全重新加载内容。缺少的功能 Blazor 框架是一个极具吸引力的软件，但很多功能仍然在开发中。

8.3K2 1

MAUI 与 Blazor 共享一套 UI 实现（五端通用）

今天就分享如何在Blazor Server、Blazor Wasm、MAUI Blazor之间共享UI的实验，这一步完成，后面开发应用时就方便多了（只针对UI修改）。 2....Server(在线）、Blazor Wasm(在线）、Android效果 iOS、macOS桌面效果 MAUI各端未做发布文件体验（需要做相应平台的发布签名等操作），大家可以按下面介绍的方法创建项目编译体验一下...项目没有Data目录，使用的示例类是直接写在FetchData.razor文件@code{}中的），那把这部分文件直接提取到类库中就可以了，那就做吧。...; 删除Data目录删除Pages目录中的Counter.razor、FetchData.razor、Index.razor三个文件（包括同名的.cs、.css文件）删除Shared目录修改_Imports.razor...5.3 Blazor Wasm项目添加Dotnet9.WebApp项目引用删除Pages、Shared目录外加App.razor文件 Program.cs中using Dotnet9.Wasm;改为

3.4K1 0

最终选型 Blazor.Server：又快又稳！

上边我已经说过了，Blazor.Wasm开发起来还是很舒服的，而且也是SPA单页面应用程序，这里先说下两者的区别： Blazor 技术又分两种： Blazor WebAssembly Blazor Server...虽然看似wasm有友好，但是部署的时候出现了一个问题，就是它是可以直接在浏览器中执行，就是WebAssembly在浏览器里实现了一个.NET Runtime，所以每次刷新的时候，都会加载全部的资源程序集文件...最后，纠结了纠结，还是选择了Blazor.Server，同时也看到上篇文章中，有小伙伴留言，更加速了我转型Server的劲头：貌似目前blazor wasm的项目加载都非常慢，我还是优先选择blazor...好啦，正式开始将项目从wasm迁移到blazor.server中。...那下边就开始迁移： 3、代码COPY 为了让大家能看到两个项目，所以我直接在之前的解决方案中，创建一个新项目： Blog.MVP.Blazor.SSR 将wwwroot资源文件，Common公共类

5.1K3 0

Blazor资源大全，很棒的Blazor(2)

使用ServiceStack在Blazor中进行快速开发模型和类型化的端到端服务 - 2022年5月19日 - 在这个视频中，我们使用ServiceStack Blazor WASM模板，展示了使用类型化的端到端服务和...API的Blazor WASM封装。...通过提供自定义 ICU 数据来减小 Blazor WASM 的大小 - 2023年1月16日 - 通过提供自定义 ICU 数据来减小 Blazor WASM 的大小。...Wasm 最近引起了很多关注，这个功能将使您能够更轻松地快速构建针对 Wasm 运行时的应用程序。....NET Blazor WASM 调试故障排除 - 2022年8月30日 - .NET Blazor WASM 调试故障排除。

5352 0

Blazor资源大全，很棒的Blazor(3)

WASM无处不在 - Steve Sanderson - 2022年7月7日 - WebAssembly很棒-你还能用它做什么？...BlazorFiddle - 在浏览器中的 Blazor .Net 开发人员游乐场和代码编辑器。...发布时预渲染 Blazor Wasm - 当发布 Blazor WebAssembly 应用时，此包会预渲染并将应用保存为静态 HTML 文件到公共文件夹中。...Blazor 和 Razor 组件简介 - 2019年10月 - 学习如何使用一个允许您在 WebAssembly 之上直接在浏览器中运行编译后代码的框架，这是 Udemy 上的一门课程。...播放列表 - 在 Blazor 中编程 - [西班牙语] 关于 Blazor 的一系列视频。 Insights from the oracle - [德语] 关于 Blazor 的博客。

3084 0

MasaFramework入门第二篇，安装MasaFramework了解各个模板

： Masa Blazor App的模板创建的是一个没有携带解决方案的项目模板，默认项目结构如图：图片一个简单的Masa Blazor Server项目 Masa Blazor Pro Web：...Masa Blazor Pro Web的模板创建类型有多种图片 Wasm就是单纯的Wasm模式 Wasm-Host就是启动一个Server托管Wasm Wasm-PWA支持浏览器安装 Server...就是单纯的Blazor Server模式 ServerAndWasm是提供一个razor类库作为界面，支持Blazor Server和Blazor Wasm俩种模式对于上面五种模式更推荐第五种模式，这样就可以在部署的时候部署...Blazor Server和Blazor Wasm俩种模式，可让用户自行切换，解剖以下Masa Blazor Pro Web的项目结构图片 MasaWebPro1项目就是Razor类库，提供界面逻辑和实际业务...Masa Blazor Website项目结构图片 Masa Blazor Website算是老版本的文档站点的模板，简单描述一下，默认使用了全球化 Masa Framework Project

7043 0

在 .NET 7上使用 WASM 和 WASI

NET 开发人员在 Blazor WebAssembly 发布时熟悉了 WASM。Blazor WebAssembly 在浏览器中基于 WebAssembly 的 .NET 运行时上运行客户端。...WASI通过提供一个系统接口来在Web之外运行WebAssembly，从而将WASM带出浏览器世界。它是 WASM 模块如何与主机环境交互的标准。什么是WASM？...WebAssembly（WASM）是基于堆栈的虚拟机的二进制指令格式。WASM 是编程语言的可移植编译目标。...由于 WASI 是在浏览器之外安全地运行 WASM，因此它无法利用嵌入到我们现代 Web 浏览器中的运行时。它需要另一个运行时。...2022.11.8 09：30 - 10：00 PST .NET 7 中 Blazor 的新增功能 Steve Sanderson .NET 7 中的 Blazor 增加了许多新的改进，使构建漂亮的交互式

1.5K1 0

Asp.net blazor 中的section节点

在 ASP.NET Core MVC 开发中，布局页面（Layout page）是一种常用的技术，用于创建可重用的页面模板，以减少重复的 HTML 代码。...在 ASP.NET Core MVC 中，section 节点是放在布局页面中的特殊区域，这些区域在内容页面（Content Page）中被填充具体内容。...布局页面可以包含多个 section 节点，以便在不同的内容页面中插入不同的内容。section 节点具有以下特性：名称：每个 section 节点都有一个唯一的名称，以便在内容页面中引用。...下面是一个简单的示例，展示了如何在 ASP.NET Core MVC 的布局页面中使用section节点：Layout.cshtml（布局页面） }在上面的示例中，内容页面指定了要填充到布局页面的Title和MainContentsection的具体内容。当该内容页面被渲染时，这些section的内容会被布局页面的相应位置替换掉。

861 0

一个基于.Net 5开发的轻量级Quartz配置中心 - QuartzCore.Blazor

Blazor WASM 模式，使用了 Ant Design Blazor。支持随时修改 Trigger ,启动立刻生效，无需重启应用。使用 FreeSql 作为数据库访问组件，亦可学习交流。...仓库详情点击在线展示 (Blazor WASM 首次加载会慢一些) 首页监控首页图表应用列表应用新增任务作业列表任务作业新增功能：实时时间区间执行统计应用管理作业管理执行日志...，这也不展开说了，就说一下为什么把 QuartzCore.Tasks 类库独立出来，不放在service层中：主要的原因是反射的 Job 注入的生命周期和 Service 生命周期不一致，会报错 ;...QuartzCore.MongoDB 层主要渲染首页图表的数据，appsettings 中亦可以设置是否使用MongoDB, 不使用则渲染图表数据。...目前 WASM 的 Blazor性能还有很大提升空间。大家可以多关注 Blazor 以及 Ant Design Blazor，Ant Design Blazor 还在起步阶段，还有很大的提升空间。

1.3K2 0

MAUI使用Masa blazor组件库

上一篇(点击阅读)我们实现了UI在Web端(Blazor Server/Wasm)和客户端(Windows/macOS/Android/iOS)共享，这篇我加上 Masa Blazor[2]组件库的引用...前置知识关于Masa Blazor请点击Masa Blazor官网[4]了解： MASA Blazor 基于Material Design和BlazorComponent的交互能力提供标准的基础组件库..."> 2.3 Blazor WebAssembly项目修改-Dotnet9.Wasm 修改Program.cs文件，添加上面封装的扩展方法AddMasaSetup(): using...：services.AddMasaBlazor();；添加Masa.Blazor资源文件：Wasm是wwwwroot/index.html, blazor server是_Layout.cshtml，...本文Blazor Server站点预览：https://server.dotnet9.com/ 本文Blazor Wasm站点预览：https://wasm.dotnet9.com/ MAUI(Android

2K2 0

Ooui.Wasm：浏览器中的.NET

小型.NET Web框架Ooui作为Web程序集（WASM）在浏览器中完全运行 – 不需要服务器端的交互，涉及的所有文件都直接从浏览器执行，.NET Web框架Ooui可以作为其开发人员Frank A....Krueger承诺Xamarin.Forms应用程序在浏览器中完全运行。....NET开发人员获得更多选择来交付他们的应用作为一个小型的演示，Krueger将XAML编辑器在线，这是使用Xamarin.Forms创建的 ?...基于mono团队的工作，OOui可以使用.NET Standard 2.0的库进行编程，并且完成的应用程序可以在所有现代浏览器中运行，包括移动设备中的浏览器。OOui开发人员Frank A.

6127 0

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（8）-Ant Design Blazor前端框架搭建

前言　　前面的章节我们介绍了一些值得推荐的Blazor UI组件库，通过该篇文章的组件库介绍最终我选用Ant Design Blazor这个UI框架作为ToDoList系统的前端框架。...Ant Design Blazor源码地址：https://github.com/ant-design-blazor/ant-design-blazor MongoDB从入门到实战的相关教程 MongoDB...新建YyToDoBlazor应用注意：我们ToDoList系统Blazor应用选用Wasm托管模式来进行开发。...AntDesign.Templates：是一个开箱即用的中台前端/设计解决方案，提供了丰富的前端组件和布局，适用于构建中后台管理系统、企业级应用等。...'wasm' | 'server' | 'hosted' 'wasm' --no-restore 如果设置这个参数，就不会自动恢复包引用 bool false 添加现有项目到解决方案中预览效果

1912 0

Day 03：Blazor Server和Blazor WebAssembly的差异

接着清空下载到浏览器的文件，再点击Counter和Fetch data页面，在以前的网站中这是刷新网页操作，会重新下载该网页所需文件，但是可以看到这两页都没有下载东西(有favicon.ico下载，聪明的你知道什么原因吗...两种模式项目结构对比 Blazor Server的Program.cs文件： Blazor Server Program.cs Blazor Wasm的Program.cs文件： Blazor Wasm...，两者的作用是一样的，.NET 6看起来是不是清爽很多？通过var app = builder.Build();得到的app实例，和原来Startup.cs中的Configure方法作用也是类似的。...及Error.cshtml，_Host.cshtml之前说过了，_Layout.cshtml（Blazor Server)和index.html(Blazor Wasm)类似，是网站主页面，Error.cshtml...index.html则是相当于Blazor Server中_Host.cshtml的文件(上一段文字有提到)。而Blazor Server中有个没说到的Data文件夹，里面又是什么呢？

2.9K3 0

Day 02 网页和Blazor介绍

Blazor是Browser和Razor的合成字，代表在浏览器上执行的Razor组件。...WebAssembly简称Wasm，是一种二进制表示语言，任何程序语言经过特定编译都可以转成Wasm，Wasm的优点是将整个程序传到浏览器而不需要服务器，由于是二进制且已经编译过的关系，渲染网页的速度会比...不容易提升运算能力，因为一个服务器能承受的Client端有限，微软给出的数据为一个单核配有3.5G内存的Blazor Server可以处理5000个连接；一个四核配有14G内存的Blazor Server...若将Blazor WebAssembly和Blazor Server的优缺点分别列出，可以看到没有一种模式是最完美的，只有最适合的。...不过Blazor毕竟是微软的新产品，笔者也只用过ASP.NET Core搭配Blazor，Blazor WebAssembly想跟PHP等非微软语言开发的后端整合或许会有其他要注意的地方，若有相关需求的人可能要多方考量

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭