Angular 7中将ArrayBuffer转换为PDF

在Angular 7中，将ArrayBuffer转换为PDF可以通过以下步骤完成：

导入所需的依赖：

import { saveAs } from 'file-saver';
import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

创建一个用于生成PDF的函数：

generatePDF(arrayBuffer: ArrayBuffer): void {
  const uint8Array = new Uint8Array(arrayBuffer);
  const blob = new Blob([uint8Array], { type: 'application/pdf' });
  saveAs(blob, 'document.pdf');
}

调用生成PDF的函数：

const arrayBuffer = // 从服务器或其他地方获取的ArrayBuffer数据
this.generatePDF(arrayBuffer);

这样，将ArrayBuffer转换为PDF并保存到本地就完成了。

关于PDF的概念，PDF（Portable Document Format）是一种用于呈现和交换文档的文件格式。它可以保留文档的格式、字体、图像和布局，无论在哪种操作系统、硬件或软件上查看。PDF具有跨平台、可读性好、可编辑性差、可压缩、可加密等特点。

PDF的应用场景非常广泛，包括但不限于以下几个方面：

电子书籍和报纸
电子表格和报告
合同和法律文件
宣传册和海报
学术论文和期刊
表单和调查问卷

腾讯云提供了一系列与PDF相关的产品和服务，其中包括：

腾讯文档：提供在线编辑和共享PDF文档的平台。
腾讯云对象存储（COS）：可用于存储和管理PDF文件。
腾讯云内容分发网络（CDN）：加速PDF文件的传输和分发。
腾讯云API网关：用于构建和管理与PDF相关的API接口。

希望以上信息能够帮助到您！

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

有帮助

没帮助

相关·内容

python json转字符串_在python中将json转换为字符串

在python中将json转换为字符串时，请尝试使用str()和json.dumps()。

10K3 0

sqlserver日期转字符串 yyyymmddhhmmss_sql中将date转换为字符串

4.6K3 0

《你不知道的 Blob》番外篇

31 bytes size console.log(myBlob.type + " is the type"); // Output: text/html is the type <a name="uO7tW...实现本地预览：将 input 获取到的 file 对象，通过实例化 FileReader ，赋值给变量 reader ，调用reader 的 readAsDataURL 方法，将 file 对象转换为...7. 生成 PDF 文档在浏览器端，利用一些现成的开源库，比如 jsPDF，我们也可以方便地生成 PDF 文档。...两者互转 2.1 ArrayBuffer 转 Blob 只需将 ArrayBuffer 作为参数传入即可： const buffer = new ArrayBuffer(16); const blob...= new Blob([buffer]); 2.2 Blob 转 ArrayBuffer 需要借助 FileReader 对象： const blob = new Blob([1,2,3,4,5]);

2.4K0 0

【笔记】618- 读《你不知道的 Blob》笔记

实现本地预览：将 input 获取到的 file 对象，通过实例化 FileReader ，赋值给变量 reader ，调用reader 的 readAsDataURL 方法，将 file 对象转换为...resolve(imageData); }; }); } // 为了进一步减少传输的数据量，我们可以把它转换为...7. 生成 PDF 文档在浏览器端，利用一些现成的开源库，比如 jsPDF，我们也可以方便地生成 PDF 文档。...两者互转 2.1 ArrayBuffer 转 Blob 只需将 ArrayBuffer 作为参数传入即可： const buffer = new ArrayBuffer(16); const blob...= new Blob([buffer]); 2.2 Blob 转 ArrayBuffer 需要借助 FileReader 对象： const blob = new Blob([1,2,3,4,5]);

3.3K4 0

WebSocket系列之字符串如何与二进制数据间进行互相转换

简单介绍下实现思路：我们得到一个需要转换的字符串后，先知道其长度后，初始化ArrayBuffer中相关参数，将数据放入ArrayBuffer中即可。...JavaScript如何将二进制数据转换为string类型知道了如何将string类型转换为二进制数据，下面我们看下如何将整个数据从二进制中读取，转换回string类型。...根据上面转换为二进制的过程，我们不难想到相关的二进制转string类型方法。具体示例如下： import utfx from '....result.reduce((prev, next)=>{ return prev + String.fromCharCode(next); }, ''); 通过上面的示例我们可以知道，我们只需要在前面4个Byte中将字符串长度读取出来...总结通过使用ArrayBuffer和DataView，我们能够在string数据和二进制数据中进行互相转换。

4.7K1 0

LaTeX论文SVG和EPS矢量图转换方法详解

本文主要介绍LaTeX论文SVG和EPS矢量图转换方法总结，包括Visio、Excel、Matplotlib等常见方法转换，总体而言是将图片转换为SVG，再转EPS矢量图和生成PDF文件，最终在LaTeX...本文主要介绍常见的EPS矢量图转换方法，其核心流程为：将图片转换为SVG，再转EPS矢量图和生成PDF文件，最终在LaTeX中显示后续内容包括： Visio转矢量图EPS至LaTeX Matplotlib...格式的图像；（2）部分在线网站提供SVG转EPS矢量图的过程，大家可以使用，但需要在最终版PDF论文文件中，放大看是否模糊；（3）部分LaTeX还需要PDF格式的图像文件，但LaTeX会自动将EPS转换为...第三步，在Visio中将图片导出为SVG矢量图。第四步，再利用前面两个部分（在线网站或AI工具）将SVG图转换为EPS矢量图或PDF文件，最终显示效果如下图所示。...需要注意：不要PNG图像转换，否则会有阴影效果先转SVG，再转EPS矢量图和PDF文件

1K6 0

你不知道的 Blob

生成 PDF Blob 与 ArrayBuffer 的区别一、Blob 是什么 Blob（Binary Large Object）表示二进制类型的大对象。...3.4 Blob 转换为 Base64 URL.createObjectURL 的一个替代方法是，将 Blob 转换为 base64 编码的字符串。...文本，然后我们利用生成的 PDF 内容来创建对应的 Blob 对象，需要注意的是我们设置 Blob 的类型为 application/pdf，最后我们把 Blob 对象中保存的内容转换为文本并输出到控制台...Blob 与 ArrayBuffer 对象之间是可以相互转化的：使用 FileReader 的 readAsArrayBuffer() 方法，可以把 Blob 对象转换为 ArrayBuffer 对象...；使用 Blob 构造函数，如 new Blob([new Uint8Array(data]);，可以把 ArrayBuffer 对象转换为 Blob 对象。

4K2 0

【js】Mammoth.js的使用：将.docx 文件转换成HTML

（居中、首行缩进等） API mammoth.convertToHtml(input, options）：把源文档转换为 HTML 文档 mammoth.convertToMarkdown(input..., options) ：把源文档转换为 Markdown 文档。...= loadEvent.target.result;//arrayBuffer mammoth.convertToHtml({ arrayBuffer: arrayBuffer }) .then...content = xhr.response; let blob = new Blob([content], { type: "application/pdf" }); let reader =...= xhr.response; //arrayBuffer mammoth .convertToHtml({ arrayBuffer: arrayBuffer }) .then(displayResult

9.1K2 0

在纯JaveScript中实现报表导出：从“PDF”到“JPG”

ARJS本身支持导出PDF，并且也提供了直接调用导出PDF的接口：export，所以我们可以先通过接口导出PDF，然后再将PDF转换为图片，最终实现导出图片的功能。...这下子，我们的最终问题就变成了是如何将** PDF **转换为图片并导出。...size: 'small' 7. }, 8. enabled: true, 9. title:'导出图片', 10....', settings).then((result) =>{ //核心代码 //通过FileReader的接口将blob转换为ArrayBuffer...fileReader.readAsArrayBuffer(result.data); fileReader.onload = function() { //为了读写ArrayBuffer

2.1K3 0

【前端知乎系列】ArrayBuffer 和 Blob 对象

ArrayBufferAndBlob.png] 本文首发在我的【个人博客】更多丰富的前端学习资料，可以查看我的 Github: 《Leo-JavaScript》，内容涵盖数据结构与算法、HTTP、Hybrid、面试题、React、Angular...一、ArrayBuffer 对象 ArrayBuffer 对象是 ES6 才纳入正式 ECMAScript 规范，是 JavaScript 操作二进制数据的一个接口。...介绍 ArrayBuffer 对象还需介绍 TypedArray 视图和 DataView 视图，本文不具体介绍，详细可以查看阮一峰老师《ECMAScript 6 入门 ArrayBuffer》章节。...与 ArrayBuffer 区别： Blob 用于操作二进制文件 ArrayBuffer 用于操作内存 2. 对象使用浏览器原生提供 Blob() 构造函数，用来生成实例。...: file.verified_type = 'image/gif'; break; case 0x25504446: file.verified_type = 'application/pdf

1.3K0 0

Blob

生成 PDF Blob 与 ArrayBuffer 的区别一、Blob 是什么 Blob（Binary Large Object）表示二进制类型的大对象。...arrayBuffer()：返回一个 Promise 对象且包含 blob 所有内容的二进制格式的 ArrayBuffer。这里我们需要注意的是，Blob 对象是不可改变的。...3.4 Blob 转换为 Base64 URL.createObjectURL 的一个替代方法是，将 Blob 转换为 base64 编码的字符串。...() 和 readAsText() 方法，用于把 Blob/File 对象转换为其它的数据格式。...文本，然后我们利用生成的 PDF 内容来创建对应的 Blob 对象，需要注意的是我们设置 Blob 的类型为 application/pdf，最后我们把 Blob 对象中保存的内容转换为文本并输出到控制台

6.1K4 0

AngularJS2.0 教程系列（一）

Why Angular2 Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。...Angular团队希望在Angular2中将复杂性封装地更好一些，让暴露出来的概念和开发接口更简单。 ?...等各种格式的JS模块加载 es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块 traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5...初识Angular2 写一个Angular2的Hello World应用相当简单，分三步走： 1....引入Angular2预定义类型 import {Component,View,bootstrap} from "angular2/angular2"; import是ES6的关键字，用来从模块中引入类型定义

2.4K1 0

万字长文带你学习【前端开发中的二进制数据】｜技术创作特训营第五期

(0); // 从偏移量为 0 的位置读取一个整数值数据转换Blob 转换为 ArrayBuffer：使用 FileReader 对象的 readAsArrayBuffer() 方法，将 Blob 或...File 对象中的数据转换为 ArrayBuffer。...= event.target.result;// 使用转换后的 ArrayBuffer 进行操作};reader.readAsArrayBuffer(blob); // 将 Blob 转换为 ArrayBufferArrayBuffer...转换为 Blob：使用 ArrayBuffer 对象创建一个新的 Blob 对象，传入 ArrayBuffer 和相应的 MIME 类型。...application/pdf'：表示 PDF 文档。'audio/mpeg'：表示 MP3 音频文件。'video/mp4'：表示 MP4 视频文件。'

3543 1

说说几个 API 和应用案例

、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码。...7. 表单元素转成对象通过 document.forms 可以获取到当前文档中 form 元素的集合，而使用 form.elements 可以获取到 form 表单中的表单元素。...上面函数中，fr 是 FileReader 的实例，readAsArrayBuffer 可以读取指定的 Blob 或 File 内容，当读取完成后会触发 loadend 事件，同时 result 属性中将包含一个...上面的 File 转 ArrayBuffer 我们稍微更改一下即可： function blobToBuf(blob, cb){ var fr = new FileReader(); var...这两个东西互转感觉没必要，如果要转的话，可以利用 FileReader 作为桥梁，先转成 ArrayBuffer，然后在转成相应的 Blob 或者 File。

1.8K2 0

如何在 TypeScript 中将字符串转换为日期对象？

在本文中，我们将讨论如何在 TypeScript 中将字符串转换为日期对象，并解决在此过程中可能遇到的一些问题。...使用 DatePipe 管道在 Angular 应用程序中，我们可以使用内置的 DatePipe 管道将日期字符串转换为日期对象。...最后，我们使用 transform 方法将日期字符串转换为日期对象。需要注意的是，DatePipe 管道仅在 Angular 应用程序中可用。...如果您正在使用其他框架或平台，请使用其他方法将日期字符串转换为日期对象。结论在 TypeScript 中将字符串转换为日期对象可能需要一些额外的步骤，但这些步骤可以确保类型安全并避免日期解析问题。...DatePipe 管道在 Angular 应用程序中将日期字符串转换为日期对象。

2.9K4 0

Blob、ArrayBuffer、File、FileReader和FormData的区别

Base64 => File //将base64转换为blob dataURLtoBlob: function (dataurl) { var arr = dataurl.split(','),...(n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type: mime}); }, //将blob转换为...fileName) { let downLink = document.createElement('a') downLink.download = fileName //字符内容转换为...document.body.removeChild(downLink) } content是需要下载的内容 fileName是保存的文件的名字原理就是利用Blob对象把需要下载的内容转换为二进制...buf.toString('hex')); // 输出 cnVub29i console.log(buf.toString('base64')); Node.js 目前支持的字符编码包括： ascii - 仅支持 7

4.8K2 1

scala(十四) 数组

for (i<- 0 until arr.length){ println(s"e=${arr(i)}") } e=10 e=22 e=23 e=444 不可变数组转可变数组(toBuffer...） val arr1=ArrayBuffer[Int](1,2,3,4,5) val arr2=ArrayBuffer[Int](6,7,8,9,10) arr1....val arr=ArrayBuffer[Int](1,2,3,4,5,7,8,9,10) val value= arr.remove(5,2) println(arr.toList) 6，7，8 被删除了...arr(i)}") } e=1 e=2 e=3 e=4 e=5 e=7 e=8 e=9 e=10 获取元素长度 length 函数 val arr=ArrayBuffer[Int](1,2,3,4,5,7,8,9,10...s"size=${arr.size}") // 9 toArray 可变数组转不可变数组 val arr=ArrayBuffer[Int](1,2,3,4,5,7,8,9,10) val array:

8405 0

【Hybrid开发高级系列】AngularJS(二)——常用$服务

$apply()方法可以在angular框架之外执行angular JS的表达式，例如：DOM事件、setTimeout、XHR或其他第三方的库。...可以为arraybuffer, blob, document, json, text, moz-blob, moz-chunked-text, moz-chunked-arraybuffer 1.4.3...= 'Hello '; }]); Html：总之就是用$compile服务创建一个directive ‘compile’，这个complie会将传入的html字符串或者DOM转换为一个...segmentfault.com/q/1010000002949626 走进AngularJs(二)ng模板中常用指令的使用方式-吕大豹 http://www.tuicool.com/articles/jIV7rm...React vs Angular 2:战争继续 http://ouvens.github.io/article-translation/2016/04/07/react-vs-angular2-fight-rages-on.html

3714 0

Uniapp仿ChatGPT Stream流式输出（非Websocket）-uniapp+see接收推送示例

utf-8'); let text = decoder.decode(new Uint8Array(res.data)); console.log(text) }) 由于接收到的数据是arraybuffer...，所以我们要转换为字符串类型，但是编码会出现一点问题，上面这段代码使用TextDecoder来转换编码，但是小程序又不支持TextDecoder。。。...null, uint8Array); text = decodeURIComponent(escape(text)); console.log(text); }) 这样就可以在小程序中把Arraybuffer...转换为字符串了还有许多方式，比如调用第三方库来代替TextDecoder，我就不去尝试了注意： 1.enableChunked: true流式响应开关，会自动在header中加入transfer-encoding...chunked 2.arraybuffer转字符串问题，有TextDecoder就很好处理，没有也可以参照我上面的示例。

9922 0

DataView 对象：JavaScript 中的数据处理利器

接着，我们使用 getInt32() 方法读取缓冲区的第 4 个字节到第 7 个字节，得到了 1145324612。...处理网络数据在处理网络数据时，我们通常需要将数据转换为二进制格式，并将其发送到服务器。使用 DataView 对象，我们可以轻松地将 JavaScript 对象转换为二进制格式，并将其发送到服务器。...处理音频数据在处理音频数据时，我们通常需要将音频数据转换为二进制格式，并将其存储到 ArrayBuffer 对象中。...使用 DataView 对象，我们可以轻松地将音频数据转换为二进制格式，并将其存储到 ArrayBuffer 对象中。...以下是一个简单的例子，演示如何使用 DataView 对象将音频数据转换为二进制格式，并将其存储到 ArrayBuffer 对象中：var audioData = [0.1, 0.2, 0.3, 0.4

7312 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云