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

如何在angular6中显示来自blob的iframe格式的pdf?

在Angular 6中显示来自Blob的iframe格式的PDF,可以按照以下步骤进行操作:

  1. 首先,确保你已经安装了pdf.js库。你可以通过以下命令来安装它:
代码语言:txt
复制
npm install pdfjs-dist
  1. 在你的组件中,导入pdfjs-dist库:
代码语言:txt
复制
import * as pdfjs from 'pdfjs-dist';
  1. 创建一个方法来加载并显示PDF文件:
代码语言:txt
复制
loadPDF() {
  const blob = new Blob([this.pdfData], { type: 'application/pdf' });
  const fileURL = URL.createObjectURL(blob);
  
  const iframe = document.getElementById('pdfViewer') as HTMLIFrameElement;
  iframe.src = fileURL;
}

上述代码中,this.pdfData是一个包含PDF文件数据的Blob对象。你可以根据自己的需求获取这个Blob对象。

  1. 在你的HTML模板中,添加一个iframe元素来显示PDF文件:
代码语言:txt
复制
<iframe id="pdfViewer" width="100%" height="600"></iframe>

请确保iframe元素的id与上述代码中的pdfViewer一致。

  1. 在组件的ngOnInit生命周期钩子中调用loadPDF方法:
代码语言:txt
复制
ngOnInit() {
  this.loadPDF();
}

这样,当组件初始化时,它将加载并显示来自Blob的iframe格式的PDF文件。

关于Angular 6的更多信息和使用方法,你可以参考腾讯云的Angular产品文档:Angular产品文档

请注意,以上答案中没有提及云计算品牌商,如有需要,你可以自行搜索相关品牌商的产品和文档。

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

相关·内容

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

场景 在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题,菜单等其他元素。...测试一页A4纸适合页面840px-1225px 打印文件里会自动添加页面标题和日期,下方会自动添加页面地址,不知道如何去掉 在后台生成pdf页面显示自带打印下载功能 1、后台生成PDF文件,返回二进制流...2、在不需要token信息的情况下,并且支持get请求的,可以在浏览器中直接打开该地址。或者通过a标签来实现下载和页面显示。并实现打印功能。...3、需要token验证的情况下,使用blob类型来接收数据,并创建一个本地地址供浏览器访问,后面操作如第二步。 private down(url: string, body?...效果 在iframe页面里调用打印 这个方法可以结合前两个方法使用,把前两个页面放在在iframe页面里。 略。

1.7K20

手把手教你前端本地文件操作与上传

,所以你应该需要再判断一下图片格式,如可以把判断改成: /^image\/[jpeg|png|gif]/.test(this.type) 然后实例化一个FileReader,调它的readAsDataURL...blob是一种类文件的存储格式,它可以存储几乎任何格式的内容,如json: letdata={hello:"world"}; letblob=newBlob([JSON.stringify(data)]...blob链接的,除了上面提到的img之外,另外一个很常见的是video标签,如youtobe的视频就是使用的blob: 这种数据不是直接在本地的,而是通过持续请求视频数据,然后再通过blob这个容器媒介添加到...可以把base64转化成blob,然后再append到一个formData里面,下面的函数(来自b64-to-blob)可以把base64转成blob: functionb64toBlob(b64Data...可以借助一个iframe,原理是默认的form表单提交会刷新页面,或者跳到target指定的那个url,但是如果把ifrmae的target指向一个iframe,那么刷新的就是iframe,返回结果也会显示在

1.9K110
  • 前端本地文件操作与上传

    ,所以你应该需要再判断一下图片格式,如可以把判断改成: /^image\/[jpeg|png|gif]/.test(this.type) 然后实例化一个FileReader,调它的readAsDataURL...blob是一种类文件的存储格式,它可以存储几乎任何格式的内容,如json: let data = {hello: "world"}; let blob = new Blob([JSON.stringify...blob链接的,除了上面提到的img之外,另外一个很常见的是video标签,如youtobe的视频就是使用的blob: ?...可以把base64转化成blob,然后再append到一个formData里面,下面的函数(来自b64-to-blob)可以把base64转成blob: function b64toBlob(b64Data...可以借助一个iframe,原理是默认的form表单提交会刷新页面,或者跳到target指定的那个url,但是如果把ifrmae的target指向一个iframe,那么刷新的就是iframe,返回结果也会显示在

    1.6K20

    关于ajax无刷新上传和下载

    所以这要说的是第三种结合 form 和 iframe 来实现,原理: 隐藏的 form 和 iframe , form 的 target 指向 iframe ,监听 iframe load ,来获取上传结果...缺点:现代浏览器会自动识别文件类型,如 pdf,会自动在浏览器打开 优雅一点的下载: function download() { var a = document.createElement("a"..."; // 返回类型blob // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑 xhr.onload = function () { // 请求完成 if...a.download = "data.xlsx"; a.href = e.target.result; $("body").append(a); // 修复firefox中无法触发...所以处理兼容性最好的方式 还是 form 结合 iframe (不考虑兼容性当然还是 XMLHttpRequest 最好) ,这种方式不论是上传和下载 都是完美支持的。

    2.5K20

    Vue(JavaScript)下载文件方式汇总

    ,对于跨域请求download属性会失效,也就是说无法自定义下载文件名 window.URL+blob 下载文件 由于上面是方法会打开新的界面,所以我们需要对下载链接进行一些处理,比如转为blob格式...: // 这里需要发送一次请求将下载地址里的文件转为blob格式,进行下载(发送请求时同样会存在跨域问题,如果跨域的话需要在nginx配置代理) const blob = await fetch('下载链接..., {type: "text/plain;charset=utf-8"}); // 只有上面的转为blob格式不同,下面的都是一样的 content = window.URL.createObjectURL...Iframe下载 iframe下载不会出现向a标签那样的跳转问题,但是iframe兼容性较差,反正我在测试中没成功过 const url = '下载地址'; const iframe = document.createElement...(blob, '文件名') 示例 转为blob格式的方法,上面已经写了很多个了,这里取其中一个做示范: const blob = await fetch('下载链接').then(res => res.blob

    2.4K10

    聊一聊前端上传大文件的几种方式。

    iframe无刷新页面 在低版本的浏览器(如IE)上,xhr是不支持直接上传formdata的,因此只能用form来上传文件,而form提交本身会进行页面跳转,这是因为form表单的target属性导致的...,其取值有 _self,默认值,在相同的窗口中打开响应页面 _blank,在新窗口打开 _parent,在父窗口打开 _top,在最顶层的窗口打开 framename,在指定名字的iframe中打开 如果需要让用户体验异步上传文件的感觉...把form的target属性设置为一个看不见的iframe,那么返回的数据就会被这个iframe接受,因此只有该iframe会被刷新,至于返回结果,也可以通过解析这个iframe内的文本来获取。...在JavaScript中,文件FIle对象是Blob对象的子类,Blob对象包含一个重要的方法slice,通过这个方法,我们就可以对二进制文件进行拆分。...,无法保证服务器接收到的切片是按照请求顺序拼接的 因此接下来我们来看看应该如何在服务端还原切片。

    2.8K20

    不要做损害SEO的事情

    损害SEO技术: Frame Iframe 损害SEO文件格式: Image Flash Video 直播 ?...框架可能会导致问题,因为它们不符合网络的概念模型一个页面只显示一个URL,框架在单个页面中显示多个URL。 谷歌说过他们尝试将框架内容与包含框架的页面相关联,但不保证他们会这样做。...Iframe的代码样例: iframe src="page.html">iframe> 格式和技术导致的收录问题 对于搜索引擎收录来说,Iframe会好一点,搜索引擎并不能够很好的播放Flash所以不能够收录...Flash SEO优化的方法,使用swfobject,把flash的内容放到HTML和JS,谷歌是不鼓励手机用户访问flash网站的; PDF,PPT,WORD,EXCEL文件,可以阅读并被收录,PDF...文件很难排在首页好位置,非常精准的搜索就能看到; Filetype:pdf,最好的是把PDF转化成HTML,HTML远远好于PDF; 带参数的URL不利SEO,可以用Auto Clean URL for

    61030

    如何在 WordPress 中嵌入 iFrame

    如何在 WordPress 中嵌入 iFrame Iframe 是一种将网页嵌入到另一个页面的内容中的方法。这是通过使用 HTML 元素、外部网站的 URL 以及窗口在您的网站上的外观参数来实现的。...如何在 WordPress 中使用 iframe:构建 iframe 的方法有多种,就像您希望在许多实例中使用其中一种一样。...第 3 步:在要嵌入的页面的编辑器中插入 iframe 标记。 注意:需要注意源 URL 的一些限制。首先,iframe 可能只显示来自与您使用相同超文本传输​​协议 (HTTP) 的网站的内容。...换句话说,如果您的站点是 HTTPS,则您只能嵌入来自其他 HTTPS 站点的信息。同样,如果您使用 HTTP,则您可能只包含使用 HTTP 的 URL。...Iframe 不仅允许您以合乎道德的方式分享他人的材料,而且还允许您显示视频和音频文件,而无需将它们存储在您自己的网站上。

    2.4K51

    CSP | Electron 安全

    是允许的来源,例如 'self' 是限制资源允许来自同源,www.trusted.com 是指允许来自 www.trusted.com 的资源,这里是支持通配符 * 的 因此接下来的介绍...URL的基础地址,仅允许加载与当前页面同源的资源 2. child-src child-src 指令定义了使用如 和 iframe> 等元素在加载 web worker 和嵌套浏览上下文时的有效来源...它的作用在于防止点击劫持(Clickjacking)等攻击手段,确保网页内容不会在未经授权的上下文中被显示。...当一个网站希望将其Web应用转化为PWA时,会创建一个 manifest.json 文件,该文件包含了关于PWA的一些元数据,如名称、图标、启动画面、主题颜色、显示模式(全屏、最小化窗口等)、服务工作线程...中,CSP 的意义比网站中更加重要,在防 XSS 方面真的是一把好手,但也会因为一些配置影响正常功能,或者给正常功能开发带来困难,这就又到方便与安全之间的权衡了 0x07 PDF版 & Github

    50810

    如何在浏览器中导入Excel表格插件(上)

    如何在Vue框架中集成表格插件(SpreadJS)       在本节内容中,小编将向大家展示如何在Vue框架引入表格插件(SpreadJS)资源并实现简单的上传文件、下载文件两个功能。...('zh-cn')                                           (SpreadJS引入到Vue中的资源信息)   3.2引入资源后,发现浏览器显示你的表格内容只有一行...具体设置方法是先在div标签中设置hostStyle的格式(注意不要忘了return hostStyle标签),然后在setup方法中设置高度格式即可。...// excelio打开文件,回调函数中的参数时SpreadJS支持的json格式 io.open(file,(fileJSON) => {...PS:细心的网友应该发现了,浏览器中只显示了表格,并没有显示Excel中上方的编辑器内容。原因是由于文章长度限制无法一次介绍完,小编将Vue集成在线编辑器的内容放在了下一篇文章中。

    35710

    使用 pdf.js 在网页中加载 pdf 文件

    在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票。(2)电子商务管理系统中查看发布的公文,公文文件一般是PDF格式的文件。 ?...目前随着浏览器技术发展的不断成熟与强大,大部分的浏览器都支持直接把PDF文件拖到浏览器中显示,最方便的是这个操作不需要额外的插件支持。但是不同的浏览器加载显示PDF的效果不同。...4、直接在浏览器中打开viewer.html,能正常的显示pdf查看器,但是无法显示pdf文件。 ?...必须将 pdfjs-2.2.228-dist 包,部署在IIS上之后,通过http方式访问才能正常的加载显示pdf格式文件的内容 5、在IIS中部署之后,通过 http://localhost:8033...方式2:嵌入在网页中 某些场景下需要将PDF查看器集成在业务网页中,便于业务流程的操作 ? 实现方法:通过iframe实现。

    43K61

    python 利用 PySide2&PyQt5实现 PDF 阅读器

    很早之前想用 python 结合 PyQt5 实现一个 PDF 阅读工具,但是一直想不到如何预览PDF 文件的内容。...) content.append("") content.append("") # 写入内容到网页中 with open("课件管理首页.html"...想了一下,实现目录什么都挺简单的,就是如何在UI界面预览PDF 难到我了,需要一个可以解析 pdf 的工具。...找了好久,终于在一个老外的网站上看到了解释, ? ? 因为我是在网页里面使用了 iFrame ,其实就是网页里面嵌入网页,导致出现了跨域的问题,就是两个网页是不同的域名。...既然这样,那我就不用两个网页,单独用浏览器显示显示 pdf 文件,用UI 界面实现目录。 这样总算搞定了,找到了一些图标,看上去还不错。 ? ? ? ?

    2.9K40

    Web 嵌入 | Electron 安全

    默认情况下,当一个 iframe> 使用了 sandbox 属性而没有特别指定 allow-same-origin 时,该 iframe> 中的文档会被视为来自一个独特的、无权限的源,即使实际上它与包含页面同源...或者称作 HTML 嵌入对象元素)表示引入一个外部资源,它用于嵌入各种外部对象到网页中,如图像、多媒体(如音频、视频)、SVG图形、PDF文档、Flash动画(虽然现代Web已逐步淘汰Flash)等。...中至少一个设置值 7) declare 【已被弃用】 取值为布尔的属性可以设置这个元素为仅声明的格式。...需要为 data 和 type 中至少一个设置值 14) usemap 【已被弃用】 指向一个 map元素的 hash-name;格式为‘#’加 map 元素 name 元素的值 15) width 资源显示的宽度...此内容由外部应用程序或其他交互式内容源(如浏览器插件)提供,与 object 基本一致,只是更倾向于多媒体 1. embed 属性 1) height 资源显示的高度 2) src 被嵌套的资源的 URL

    98610

    你不知道的 Blob

    img 元素的 src 属性从而显示这张图片。...使用的字符包括大小写拉丁字母各 26 个、数字 10 个、加号 + 和斜杠 /,共 64 个字符,等号 = 用来作为后缀用途。 下面我们来介绍如何在 HTML 中嵌入 base64 编码的图片。...文档 PDF(便携式文件格式,Portable Document Format)是由 Adobe Systems 在 1993 年用于文件交换所发展出的文件格式。...文本,然后我们利用生成的 PDF 内容来创建对应的 Blob 对象,需要注意的是我们设置 Blob 的类型为 application/pdf,最后我们把 Blob 对象中保存的内容转换为文本并输出到控制台...; 使用 Blob 构造函数,如 new Blob([new Uint8Array(data]);,可以把 ArrayBuffer 对象转换为 Blob 对象。

    4.3K20
    领券