和往常一样,jsPDF是一个开源的客户端的PDF解决方案,在之前的文章中已经介绍过几个Web端和PDF相关的库,jsPDF同样是一个不错的客户端PDF引 SDK,你可以通过jsPDF在客户端完成相关操作,它包含了非常丰富的API,帮助你完成一系列的复杂操作!可以说它是相当领先的HTML5客户端解决方案了!
https://github.com/MrRio/jsPDF
Github star数17k+,可以说相当受欢迎了!
一般情况下我们会考虑使用包管理,常见的就是npm了,因此安装非常简单
npm install jspdf --save
或者也可以使用yarn
yarn add jspdf
接下来就是制作你的文件的时候了
默认导出为a4纸张,纵向,使用毫米表示单位
var doc = new jsPDF() doc.text('Hello world!', 10, 10) doc.save('a4.pdf')
如果要更改纸张尺寸,方向或单位,可以执行以下操作:
var doc = new jsPDF({ orientation: 'landscape', unit: 'in', format: [4, 2] }) doc.text('Hello world!', 1, 1) doc.save('two-by-four.pdf')
PDF中的14种标准字体仅限于ASCII代码页。如果要使用UTF-8,则必须集成自定义字体,该字体提供所需的字形。jsPDF支持.ttf文件。因此,如果你希望在pdf中使用中文文本,则您的字体必须具有必要的中文字形。因此,请检查您的字体是否支持所需的字形,否则它将显示空白而不是文本。
要将字体添加到jsPDF,在/fontconverter/fontconverter.html中使用官网提供的fontconverter。fontconverter将创建一个js文件,其中包含提供的ttf文件的内容作为base64编码的字符串和jsPDF的附加代码。你只需将生成的js-File添加到项目中即可。然后,就可以在代码中使用setFont-method并编写UTF-8编码文本。
常规操作
import * as jsPDF from 'jspdf'
有些框架,必须像下面这样
import jsPDF from 'jspdf';
jsPDF的api非常丰富,在这里就不提供相关地址了,在Github必然找的到,本文重点不在于介绍jsPDF的用法,将部分API截图展示,通过名称大致能猜到一些意思,具体用法需要参考官网文档:
从截图来看,其文档特别的详细,具体到每一个API在js文件的行数,便于阅读源代码,包括参数以及返回值都非常明确:
官方提供了一个在线demo,可以直接运行代码,感兴趣的可以先尝试一下:
jsPDF是笔者见过类似产品中较为突出的,几乎涵盖了所有PDF相关操作,非常详细的文档也让开发者,轻松上手,在线demo还能快速学习,如果你的项目对PDF的操作比较多,不妨尝试下jsPDF,唯一需要注意的就是解决字体问题,但是上文也提到过解决方案,感兴趣的可以进行体验!
于TypeScript的先天优势,TypeScript越来越受欢迎。那问题来了:TypeScript 和 JavaScript 究竟哪个更好?JavaScript真的会败北吗?
作者 | Mahdhi Rezvi
译者 | 明明如月,责编 | 郭芮
以下为译文:
你以前可能曾听说过“TypeScript”这个词。到现在 2019年,TypeScript 在 GitHub 最常用编程语言排行榜排名第 7 位,在增速最快的编程语言排行榜中占第 5 位。
TypeScript (TS) 是微软开发的一种开源编程语言,可以编译成 JavaScript (JS) 代码。自 2012 年发布以来,这门语言一直保持活跃发展并且越发受欢迎。
在早期,开发社区就将 TypeScript 和 Angular 紧密联系在一起。尽管用 JS 也不是不行,但是 Angular 强迫你使用 TypeScript。
TypeScript 和 JavaScript 的区别是什么?
Typescript 是 JavaScript 的超集,可以被编译成 JavaScript 代码。 用 JavaScript 编写的合法代码,在 TypeScript 中依然有效。 Typescript 是纯面向对象的编程语言,包含类和接口的概念。 程序员可以用它来编写面向对象的服务端或客户端程序,并将它们编译成 JavaScript 代码。
TypeScript和 JavaScript的关系,图源:GeeksforGeeks
TypeScript 引入了很多面向对象程序设计的特征,包括:
interfaces 接口
classes 类
enumerated types 枚举类型
generics 泛型
modules 模块
主要不同点如下:
TS 是一种面向对象编程语言,而 JS 是一种脚本语言(尽管 JS 是基于对象的)。
TS 支持可选参数, JS 则不支持该特性。
TS 支持静态类型,JS 不支持。
TS 支持接口,JS 不支持接口。
为什么要用 TypeScript ?
TS 在开发时就能给出编译错误, 而 JS 错误则需要在运行时才能暴露。
作为强类型语言,你可以明确知道数据的类型。代码可读性极强,几乎每个人都能理解。
TS 非常流行,被很多业界大佬使用。像 Asana、Circle CI 和 Slack 这些公司都在用 TS。
为什么不该用 TypeScript ?
TS 需要编译。TS 得通过编译才能变成 JS 代码。
随着时间的推移,类型可能变得非常复杂。当项目不断变大时这种情况十分常见。
尽管 TS 是类型安全的,在有些情况下编译器也有检查不出任何错误的情况。当我们修改编译后的 JS 代码时,错误就不可检测了。不过随着编译器不断改进,这种情况会越来越少。
摘要
JavaScript | TypeScript | |
---|---|---|
语言 | 脚本语言 | 面向对象编程语言 |
学习难度 | 灵活易学 | 需要有脚本编程经验 |
类型 | 轻量级解释编程语言 | 强类型的面向对象编程语言 |
客户端/服务端 | 客户端服务端都有 | 侧重客户端 |
拓展名 | .js | .ts 或 .tsx |
耗时 | 更快 | 编译代码需要些时间 |
数据绑定 | 没有类型和接口的概念 | 使用类型和接口表示数据 |
注解 | 不需要注解 | 使用注解才能最大限度发挥 TypeScript的特性 |
语法 | 所有的语句都写在脚本标签内。浏览器将脚本标签内的文本识别为脚本 | 一个 TypeScript 程序由模块、方法、变量、语句、表达式和注释构成。 |
静态类型 | JS 中没有静态类型的概念 | 支持静态类型 |
模块支持 | 不支持模块 | 支持模块 |
接口 | 没有接口 | 支持接口 |
可选参数方法 | 不支持 | 支持 |
原型 | 没有这种特性 | 支持原型特性 |
开发者社区 | JS 使用范围很广,被编程社区广泛接受和使用 | TS 比较新,编程社区相对较小 |
参考选择 | 小型项目 | TS 是一种面向对象语言,代码更简洁,可读性和复用性强。因此 TS 更适合大型项目。 |
表格来自:Edureka
结论
那问题来了:TypeScript 和 JavaScript 哪个更好?
由于 TS 的先天优势,TS 越来越受欢迎。但是请记住,TS 最终不可能取代 JS,因为 JS 是 TS 的核心。
选择 TypeScript 还是 JavaScript 要由开发者自己去做决定。如果你喜欢类型安全的语言,那么推荐你选择 TS。 如果你已经用 JS 好久了,你可以选择走出舒适区学习 TS,也可以选择坚持自己的强项,继续使用 JS。
本文到此结束,希望你能有所收获,轻松快乐的学习。
原文:https://medium.com/javascript-in-plain-english/is-typescript-the-way-forward-659caa2cb10f
作者:Mahdhi Rezvi,移动开发工程师,曼彻斯顿大学计算机专业本科生,热衷学习新技术。译者:明明如月,知名互联网公司 Java 高级开发工程师,CSDN 博客专家。
本文为 CSDN 翻译,转载请注明来源出处。
庆假期很适合学习点新知识。前几天有粉丝在后台问我关于使用 js 开发后端服务的建议,我给推荐了这一个面向小白的走向全栈开发工程师的教程。
这是一个面向零基础的基于 JavaScript 语言的全栈开发教程,教程基于目前流行的前后端分离开发模式,使用 Vue.js + Node.js 并且通过从实际需求的角度来完成基础的业务代码,没有过多功能封装,几乎都是底层的代码,通俗易懂,上手容易。
教程截图
这套 JavaScript 全栈教程的作者是廖雪峰,是一位有着超过十年软件开发经验的大神,精通 Java / Python / Ruby / Visual Basic / Objective C 等,对开源框架有很深入的研究,著有《Spring 2.0核心技术与最佳实践》一书,是很多后端开发工程师非常熟知的业内大神。
因为针对的是对 javascript 零基础的小白用户,因此这个教程有很大篇幅是 javascript 语言入门。
这是我毫无后端开发经验时学习后端开发的入门的教程,这套教程让我学会了如何使用 javascript 来开发后端 api 接口。而且前面的基础语法教程,也看得津津有味,复习了很多不会用、不常用但很巧妙的代码实现。这是我推荐这个教程的最大原因。
教程截图
这个教程除了适合零基础的小白,我认为这更像一个写给后端开发者的、从其他后端语言转 javascript 的教程,如果像我之前学习的那样没有过后端开发经验,就需要注意几个问题:
入门靠老师,修行靠自己。总的来说,这只是一套非常基础的入门教程,学完后能够了解前端开发和后端开发,可以实现简单的 demo,可以帮助我们学习 koa / egg.js 这类基于 Node.js 的后端开发框架,但后端开发需要学习的知识很多,数据库设计、查询优化、架构设计等等,成为一个合格的全栈工程师,路还有很远。
这是一个完全免费的 JavaScript 全栈入门教程,就算完全不懂 js 也能快速入门,在线免费学习。如果想学 js 语法,也可以看看之前推荐过的阮一峰写的免费 javascript 系统学习入门教程。
最后祝各位有所收获,迈进全栈开发工程师行列。
关注我,持续分享高质量的免费开源、免费商用的资源。
↓↓点击查看本次分享的网址。
JavaScript 全栈开发入门 - 由廖雪峰提供的面向小白的免费在线教程|那些免费的砖
*请认真填写需求信息,我们会在24小时内与您取得联系。