首页
学习
活动
专区
工具
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.6K20

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

,所以你应该需要再判断一下图片格式可以把判断改成: /^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,但是如果把ifrmaetarget指向一个iframe,那么刷新就是iframe,返回结果也会显示

1.8K110

前端本地文件操作与上传

,所以你应该需要再判断一下图片格式可以把判断改成: /^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,但是如果把ifrmaetarget指向一个iframe,那么刷新就是iframe,返回结果也会显示

1.5K20

前端下载图片N种方法

app.listen(3000, () => { console.log('服务启动完成') }) 然后在命令行输入:node app.js,访问http://localhost:3000/,页面显示...-- 触发保存 --> zip静态资源 <!...二.base64格式下载 a标签支持data:协议URL,利用这个可以让后端返回base64格式字符串,然后使用download属性进行下载: <a :href="base64Img...三.<em>blob</em><em>格式</em>下载 还是a标签,它还支持<em>blob</em>:协议<em>的</em>URL,利用这个可以把响应类型设置为<em>blob</em>,然后和base64一样扔给a标签: <a :href="blobData...六.ifrmae下载 document.execCommand有一个SaveAs命令,可以触发浏览器另存为行为,利用这个可以把图片加载到iframe里,然后通过iframedocument来触发该命令

89820

关于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.1K10

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

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

2.6K20

不要做损害SEO事情

损害SEO技术: Frame Iframe 损害SEO文件格式: Image Flash Video 直播 ?...框架可能会导致问题,因为它们不符合网络概念模型一个页面只显示一个URL,框架在单个页面显示多个URL。 谷歌说过他们尝试将框架内容与包含框架页面相关联,但不保证他们会这样做。...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

60030

何在 WordPress 嵌入 iFrame

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

2.2K51

何在浏览器中导入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集成在线编辑器内容放在了下一篇文章

26410

CSP | Electron 安全

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

18510

使用 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实现。

42.5K61

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

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

2.5K40

Web 嵌入 | Electron 安全

默认情况下,当一个 使用了 sandbox 属性而没有特别指定 allow-same-origin 时,该 文档会被视为来自一个独特、无权限源,即使实际上它与包含页面同源...或者称作 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

21810

你不知道 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 对象。

4K20
领券