首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在新的Chrome选项卡中打开PDF Blob (Angular 2)

在新的Chrome选项卡中打开PDF Blob (Angular 2)

在Angular 2中,要在新的Chrome选项卡中打开PDF Blob,可以按照以下步骤进行操作:

  1. 首先,确保你已经安装了Angular CLI,并创建了一个新的Angular项目。
  2. 在组件的HTML模板中,添加一个按钮或链接,用于触发打开PDF Blob的操作。
代码语言:txt
复制
<button (click)="openPDF()">打开PDF</button>
  1. 在组件的Typescript文件中,导入相关的依赖项。
代码语言:txt
复制
import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
  1. 在组件的构造函数中注入DomSanitizer。
代码语言:txt
复制
constructor(private sanitizer: DomSanitizer) { }
  1. 创建一个方法来打开PDF Blob。
代码语言:txt
复制
openPDF() {
  // 生成一个示例的PDF Blob
  const pdfData = '这里是PDF的二进制数据';
  const blob = new Blob([pdfData], { type: 'application/pdf' });

  // 创建一个URL对象,用于在新的选项卡中打开PDF Blob
  const url = URL.createObjectURL(blob);

  // 使用DomSanitizer将URL转换为安全的URL
  const safeUrl: SafeUrl = this.sanitizer.bypassSecurityTrustUrl(url);

  // 在新的选项卡中打开PDF Blob
  window.open(safeUrl.changingThisBreaksApplicationSecurity);
}

在上述代码中,我们首先创建了一个示例的PDF Blob,然后使用URL.createObjectURL()方法创建了一个URL对象。接下来,使用DomSanitizer将URL转换为安全的URL,以避免安全性问题。最后,使用window.open()方法在新的选项卡中打开PDF Blob。

请注意,这只是一个示例代码,你需要根据实际情况来生成PDF Blob的二进制数据。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云对象存储(COS):提供高可靠、低成本的云端存储服务,适用于存储和处理任意类型的文件。了解更多信息,请访问腾讯云对象存储(COS)
  • 腾讯云云服务器(CVM):提供可扩展的计算容量,帮助用户构建和扩展应用程序。了解更多信息,请访问腾讯云云服务器(CVM)

请注意,以上链接仅供参考,具体的产品选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 谷歌发布 Chrome 85 稳定版,引入 PGO,页面加载速度提升 10%

    标签管理 标签分组并折叠 标签组可帮助从视觉上区分主题或任务标签,甚至是标签的优先级。可以折叠和展开以更轻松地查看需要访问的选项卡组。 ? 平板模式下新的触摸式选项卡 ?...切换到已经打开的标签页 在 Android 版Chrome 的地址栏中输入页面标题时,如果已经打开该标签,则会看到建议切换到该标签的建议。 ?...目前该功能在 Chrome beta 版本中。 ? 在 Chrome 中填写并保存 PDF 在接下来的几周内,用户将能够直接从 Chrome 填写 PDF 表单并将其与输入内容一起保存。...如果再次打开文件,则可以从上次中断的地方继续。 ? 网址共享更轻松 改进了 Android 用户的 URL 共享,可快速复制链接,将其发送到其他设备上的 Chrome,以及通过其他应用程序发送链接。...这项新的 QR 码功能也将在桌面版 Chrome 中推出,并且可以从 Chrome 地址栏中的新 QR 图标进行访问。

    86310

    Chrome 87 发布,获多年来最大性能提升

    此版本包含的一些更新内容有: 现在,Chrome 会优先考虑活动选项卡而不是打开的所有内容 — 将 CPU 使用率降低 5 倍,并将电池寿命延长 1.25 小时(根据内部基准测试)。...改进的 PDF Viewer Chrome 87 中最重大的视觉变化之一就是 PDF。新的 PDF Viewer 包括一个侧边栏,可显示所有页面的预览。...该菜单还包括一个可以并排查看页面新选项。 搜索打开的标签页 Chrome 87 在状态栏中引入了一个箭头图标,可让用户查看所有打开的标签页的列表。...“Chrome Actions” in the Omnibox Chrome 87 在 Omnibox 中增加了一个名为 "Chrome Actions" 的功能。...Chrome OS 新壁纸 谷歌在 Chrome OS 中推出了一些新的壁纸。这些壁纸可以在壁纸选择器中的新 "Element"、"Made by Canvas" 和 "Collage" 系列中找到。

    56420

    教程|在 Angular 4 中加载功能模块(下)

    练习 2:惰性加载 假设多个团队正在为此应用程序开发模块。您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。...幕后过程 在继续操作之前,我们看看此加载机制的细节。首先在 Chrome 浏览器中运行该应用程序。在 Windows 机器上,按下 Fn+F12。在 Mac 上,按下 Command->alt->i。...现在尝试单击 Currency 菜单,查看图 11(第 2 列)和图 12(第 2 列)中的 Sources 和 Network 选项卡。...在 Chrome 浏览器中重新加载该应用程序,然后转到 Chrome 开发人员工具的 Network 和 Sources 选项卡。...参见 Angular4PreLoadModules.zip 中的示例应用程序,更详细地了解预加载。 自定义预加载:在大型应用程序中,仅预先加载少数惰性加载模块的做法是比较合理的。

    2.3K10

    小程序测试方案初探

    puppeteer Chrome 团队出品的一款更友好的Headless Chrome Node API,用于代替用户在页面上面点击、拖拽、输入等多种操作,常见的使用场景还是应用到UI自动化测试,...puppeteer可以对页面进行截图保存为图片或者PDF,解决爬虫无法实现的一些操作(异步加载页面内容) 。...await browser.close(); })(); 上面几行代码其实就是相当于我们日常的一些操作:打开chrome->新建选项卡->输入url并回车->页面截图->保存,也可以看出puppeteer...跑通测试demo之后,来试试小程序这边,首先必须让小程序跑在chrome上面,就要用到wept了。 1....直接在小程序根目录上面执行wept 然后打开chrome,访问http://localhost:3000/#!

    8.5K30

    IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

    2、编辑- 跳转到闭合括号/引用Tab现在,在键入时,您可以使用Tab在结束括号或结束引号之外导航。...此外,您可以根据需要打开任意数量的日志选项卡。- Branch过滤器中最喜欢的分支我们已将“收藏”分支添加到“ 日志”选项卡中的“ 分支”过滤器,因此您现在可以快速过滤您喜欢的分支的提交。...在“修订”操作中使用新的“ 浏览存储库”(可从VCS日志的上下文菜单或文件历史记录中获取),以在“ 项目工具”窗口中打开所需的存储库状态。...在IDE中启动带有coverage的JavaScript Debug配置,并在Chrome中与您的应用进行交互。然后停止配置,IntelliJ IDEA将在Coverage工具窗口中显示覆盖率报告。...- 与Angular CLI的新集成在IntelliJ IDEA 2019中,由于与ng add的集成,您可以为Angular应用程序添加新功能。

    4.7K30

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    在HTML文件中,它在代表WijmoJS纯前端控件的每个标记上方插入CodeLens链接。单击该链接可在单独的选项卡中打开Wijmo Designer,并根据关联的标记对其进行初始化。...WijmoJS VSCode Designer还提供了一个独立的命令,可以在单独的选项卡中打开设计图面,您可以在其中使用示例数据实例化控件,自定义其属性,并生成可以复制到源文件中的Angular标记。...如果您已经下载了WijmoJS,则可以在Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters文件夹中找到此项目。...在我们的示例中,操作是在单独的选项卡中打开设计图面,并使用 Angular标记提供的上下文,以及源文件中该标记的位置。 现在单击链接以在相邻选项卡中打开设计器。...创建新的控件标记 要为新的WijmoJS 纯前端控件创建 Angular标记,请按F1打开命令选项板,然后执行WijmoJS VSCode Designer命令以打开设计图面的独立版本。

    5.4K40

    网页截长图 截屏Google Chrom 插件 FireShot 分享 3000万人使用的网页截图插件

    捕获和编辑屏幕截图 FireShot是一款出色的免费工具,可用于在Windows PC上捕获网页。其易于使用的界面让您可以捕获页面的一部分、整个浏览器窗口,甚至是所有打开的选项卡的内容。...许多功能触手可及 在捕获浏览器屏幕截图时,您可以选择记录整个页面、可见部分、自定义选择或所有打开的选项卡。您还可以捕获帧、滚动 DIVS甚至浮动元素。...2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入:chrome://extensions/       3.找到自己已经下载好的Chrome离线安装文件xxx.crx,然后将其从资源管理器中拖动到...Chrome的扩展管理界面中,这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。       ...FireShot会打开一个新的标签页,上面显示截图,下面显示保存截图选项,可以保存到文件,或另存为pdf。 梦溪分享    3.保存截图到剪贴板。

    4.1K20

    【技术圈】Chrome 80 稳定版发布| Node.js 安全漏洞修复

    速览 Chrome 80 稳定版发布 Node.js 13.6-13.8 发布 Firefox 73 正式发布 TypeScript 3.8 RC 发布 Angular 9.0.0 版本发布 Chrome...新特性 支持与 sourcemap 进行交互的 API child_process 模块支持监听子进程中的 uncaughtException 事件 ESM 模块添加多个 hook,并支持 conditional...在 Firefox 73 中,其引入了“可读性背板”解决方案,该解决方案在文本和背景图像之间放置了一块背景色。现在,高对比度模式下的网站在不禁用背景图片的情况下更具可读性。...TypeScript 3.8 的候选版本发布了。TypeScript 3.8 带来了许多新特性,包括新的 ECMAScript 标准功能,仅用于导入/导出类型的新语法等等。...更新内容详见:https://github.com/angular/angular/blob/master/CHANGELOG.md Chrome 81 开始支持 Text fragments 功能 该功能允许用户使用

    1.4K10

    10个必须知道的Chrome开发工具和技巧

    打开谷个浏览器的performance选项卡,然后单击右上角的齿轮图标就可以看到 Newwork 和CPU的模拟情况。 image.png 2....Audits Audits(审计),这个功能其实一直存在,只不过在chrome 60之后,发生了翻天覆地的变化:引入了Google开源的另外一个项目:LightHouse。...我们点击下方的大括号{}图标,即可使用Pretty Print功能了 image.png 5.快速文件切换器 如果你知道文件名,则不必打开“Sources”选项卡。...Extensions 我们可以将扩展程序安装到Chrome开发者控制台。 许多框架都有自己的扩展名,以简化其技术(Vue,Angular,React等)的开发。...image.png 如何打开caverage 前提:chrome浏览器的版本必须是59或以上,在ctrl+shift+i快速打开devtools,点击右上角的...

    1.3K20

    分享 10 个你可能不知道的 Devtools 技巧!

    Edge 和 Firefox 的 Devtools 都提供了编辑并重新发送网络请求的功能(Chrome 在最近的版本中也在尝试提供类似的能力,不过只能覆盖 Header ,体验并不是很好) 比如,在 Edge...2. 禁用调试语句 有些网站会故意使用 debugger 语句来禁止你调试,只要 DevTools 关闭,这个语句就没有效果,但是只要你打开它,DevTools 就会暂停网站的主线程。...我们可以在 Devtools 中找到 3D 视图面板,然后打开它: 在 3D 视图工具中,在三种不同模式之间进行选择:Z-Index、DOM 和 Composited Layers。...首先我们在 Element 选项卡找到并选中相应的元素,然后点击右侧的 Event Listeners 选项卡,找到我们想要删除的事件,然后点击 Remove 即可(在 Chrome 和 Edge 的操作相同...切换 Devtoos 语言 一般情况下 Devtools 都会继承操作系统当前选择的默认语言,但是 Devtoos 上的翻译有时候真的挺别扭的,在 Safari 、 Chrome 或 Edge 中,我们都可以在

    56010

    10个 Chrome 开发工具和技巧

    打开谷个浏览器的performance选项卡,然后单击右上角的齿轮图标就可以看到 Newwork 和CPU的模拟情况。 image.png 2....Audits Audits(审计),这个功能其实一直存在,只不过在chrome 60之后,发生了翻天覆地的变化:引入了Google开源的另外一个项目:LightHouse。...我们点击下方的大括号{}图标,即可使用Pretty Print功能了 image.png 5.快速文件切换器 如果你知道文件名,则不必打开“Sources”选项卡。...Extensions 我们可以将扩展程序安装到Chrome开发者控制台。 许多框架都有自己的扩展名,以简化其技术(Vue,Angular,React等)的开发。...image.png 如何打开caverage 前提:chrome浏览器的版本必须是59或以上,在ctrl+shift+i快速打开devtools,点击右上角的...

    85730

    -所有版本的Acrobat PDF编辑器

    全新的“比较文件”工具可快速准确地检测两个PDF文件之间的差异。在一个窗口中打开多个PDF,使用新的选项卡式查看可以更快地完成工作。...通过使用全新的编号列表或项目符号列表,同时使用“编辑PDF”工具,可以对PDF进行更多处理。借助新的“扫描到PDF”工作流程,可以轻松选择最佳的扫描选项并获得最佳的结果。...12020更新Acrobat中的保护模式(沙盒)支持简化填充和签名体验新菜单轻松访问与表单相关工具简化和指导的编辑体验简化redact工具在“整理页面”工具和页面缩略图中剪切,复制和粘贴缩略图默认情况下...,打开带注释的PDF的“注释”窗格改进打印对话框云端搜索2功能概述将Microsoft Office文档转换为PDFJPG至PDF将网页转换为PDF从几乎任何文件创建PDF压缩PDF以减小尺寸分割PDF...1.双击setup进入安装2.是否需要作为默认PDF,点击安装3.开始安装4.点击完成5.开始使用免安装(英文)双击打开即可使用提示:此版本不太稳定,会出现图标闪烁!介意勿下!

    2.2K20

    记录工作中遇到的各种问题(Bug,总结,记录)

    在Chrome开发者工具中打开开发者工具(Inspect in DevTools) 其实Chrome开发者工具就像是一个iframe,嵌入到页面中,也是可以审查的 首先打开DevTools至独立窗口中,..." width="100%" height="100%" type="application/pdf" /> 在Mac上的safari是能嵌入的,不过在iPhone或iPad下失效,但是能直接通过链接打开...Chrome新版本的插件列表中默认没有Shockwave Flash,某些Flash播放器会失效(如果播放前查询插件是否存在) 在比较旧的浏览器中是可以正常播放Flash视频的,有直接就能播放的,也有提示选择打开...但在新版Chrome中(如62),连提示都没有了,需要手动在设置中添加Flash支持的网站例外才能播放 看了所用的Flash播放器(CuPlayer),播放前是先检测插件是否存在的,这造成了在新版Chrome...暂时的解决办法是,稍微修改一下播放器的源码,在特定的时候传个参数,就不检测Flash是否存在了,直接使用即可,就可以让Chrome出现打开Flash的提示 允许一次之后,当前域名端口的一条记录就会被添加到例外中

    18.2K12

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

    获取元素 Angular中提供一种叫做ViewChild的注解,可以帮助我们引用到页面中的svg元素,此处就是#template....这是chrome/chormium内核存在已久的bug[1],stackoverflow上给出的绕行方案是用URL.createObjectURL(blob)取而代之。...解决@ViewChild未及时刷新问题 @ViewChild取得页面元素可能不是最新的,Angular的Change detection需要时间完成刷新,所以有很短时间的延迟[2]。...永远从问题最近的地方开始分析 不要用战术上的勤奋掩饰战略上的懒惰 我个人对Angular并不十分熟悉,在实现svg和png图片下载功能的过程中遇到一些坑,这些坑有深有浅,深的直接面向stackoverflow...,在遍寻Angular的官方文档和样例之后,我确信注入方式没有问题。这步有可取性,因为对Angular本身不够熟悉,查文档是合理的行为,但是解决思路离目标太远,程序的问题应该通过debug解决。

    2.7K40

    Angular 英雄编辑器

    应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。...CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称,以识别出该组件。...显示 hero 对象 修改模板中的绑定,以显示英雄的名字,并在详情中显示 id 和 name,就像这样: heroes.component.html (HeroesComponent 的模板) 2>...你可以编辑英雄的名字,并且会看到这个改动立刻体现在这个输入框上方的 2> 中。 声明 HeroesComponent 每个组件都必须声明在(且只能声明在)一个 NgModule 中。...打开 src/app/app.module.ts 你可以在顶部找到 HeroesComponent 已经被导入过了。

    2.6K70
    领券