首页
学习
活动
专区
工具
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 图标进行访问。

    84510

    小程序测试方案初探

    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

    教程| 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

    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" 系列中找到。

    55820

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

    2、编辑- 跳转到闭合括号/引用Tab现在,键入时,您可以使用Tab结束括号或结束引号之外导航。...此外,您可以根据需要打开任意数量日志选项卡。- Branch过滤器中最喜欢分支我们已将“收藏”分支添加到“ 日志”选项卡“ 分支”过滤器,因此您现在可以快速过滤您喜欢分支提交。...“修订”操作中使用“ 浏览存储库”(可从VCS日志上下文菜单或文件历史记录获取),以“ 项目工具”窗口中打开所需存储库状态。...IDE启动带有coverageJavaScript 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.保存截图到剪贴板。

    4K20

    【技术圈】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

    -所有版本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.开始使用免安装(英文)双击打开即可使用提示:此版本不太稳定,会出现图标闪烁!介意勿下!

    2K20

    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,点击右上角...

    85130

    分享 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 ,我们都可以

    50810

    记录工作遇到各种问题(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.1K12

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

    获取元素 Angular中提供一种叫做ViewChild注解,可以帮助我们引用到页面svg元素,此处就是#template....这是chrome/chormium内核存在已久bug[1],stackoverflow上给出绕行方案是用URL.createObjectURL(blob)取而代之。...解决@ViewChild未及时刷新问题 @ViewChild取得页面元素可能不是最新AngularChange 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 模板) ...你可以编辑英雄名字,并且会看到这个改动立刻体现在这个输入框上方  。 声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 。...打开 src/app/app.module.ts 你可以顶部找到 HeroesComponent 已经被导入过了。

    2.5K50
    领券