整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5 的JavaScript 客户端PDF解决方案-jsPDF

和往常一样,jsPDF是一个开源的客户端的PDF解决方案,在之前的文章中已经介绍过几个Web端和PDF相关的库,jsPDF同样是一个不错的客户端PDF引 SDK,你可以通过jsPDF在客户端完成相关操作,它包含了非常丰富的API,帮助你完成一系列的复杂操作!可以说它是相当领先的HTML5客户端解决方案了!



Github

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')

使用UTF-8 / TTF

PDF中的14种标准字体仅限于ASCII代码页。如果要使用UTF-8,则必须集成自定义字体,该字体提供所需的字形。jsPDF支持.ttf文件。因此,如果你希望在pdf中使用中文文本,则您的字体必须具有必要的中文字形。因此,请检查您的字体是否支持所需的字形,否则它将显示空白而不是文本。



要将字体添加到jsPDF,在/fontconverter/fontconverter.html中使用官网提供的fontconverter。fontconverter将创建一个js文件,其中包含提供的ttf文件的内容作为base64编码的字符串和jsPDF的附加代码。你只需将生成的js-File添加到项目中即可。然后,就可以在代码中使用setFont-method并编写UTF-8编码文本。



Angular/Webpack/React等配置

常规操作

import * as jsPDF from 'jspdf'

有些框架,必须像下面这样

import jsPDF from 'jspdf';


API

jsPDF的api非常丰富,在这里就不提供相关地址了,在Github必然找的到,本文重点不在于介绍jsPDF的用法,将部分API截图展示,通过名称大致能猜到一些意思,具体用法需要参考官网文档:













从截图来看,其文档特别的详细,具体到每一个API在js文件的行数,便于阅读源代码,包括参数以及返回值都非常明确:



在线DEMO

官方提供了一个在线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 代码时,错误就不可检测了。不过随着编译器不断改进,这种情况会越来越少。

摘要


JavaScriptTypeScript
语言脚本语言面向对象编程语言
学习难度灵活易学需要有脚本编程经验
类型轻量级解释编程语言强类型的面向对象编程语言
客户端/服务端客户端服务端都有侧重客户端
拓展名.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简介
  • 快速入门
  • 函数
  • 标准对象
  • 面向对象编程
  • 浏览器
  • jQuery
  • 错误处理
  • underscore
  • Node.js

学习建议和感想

这是我毫无后端开发经验时学习后端开发的入门的教程,这套教程让我学会了如何使用 javascript 来开发后端 api 接口。而且前面的基础语法教程,也看得津津有味,复习了很多不会用、不常用但很巧妙的代码实现。这是我推荐这个教程的最大原因。

教程截图

这个教程除了适合零基础的小白,我认为这更像一个写给后端开发者的、从其他后端语言转 javascript 的教程,如果像我之前学习的那样没有过后端开发经验,就需要注意几个问题:

  • 教程涉及的代码最后自己敲出来实现一遍,看懂并不代表会写
  • 后端开发设计的基础知识很多,建议提前了解数据库、服务器基本知识,学习起来会更顺畅
  • 教程中很多关联的代码片段,拷贝出来配合流程图来理解,会事半功倍

入门靠老师,修行靠自己。总的来说,这只是一套非常基础的入门教程,学完后能够了解前端开发和后端开发,可以实现简单的 demo,可以帮助我们学习 koa / egg.js 这类基于 Node.js 的后端开发框架,但后端开发需要学习的知识很多,数据库设计、查询优化、架构设计等等,成为一个合格的全栈工程师,路还有很远。

教程免费学习说明

这是一个完全免费的 JavaScript 全栈入门教程,就算完全不懂 js 也能快速入门,在线免费学习。如果想学 js 语法,也可以看看之前推荐过的阮一峰写的免费 javascript 系统学习入门教程。

最后祝各位有所收获,迈进全栈开发工程师行列。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

JavaScript 全栈开发入门 - 由廖雪峰提供的面向小白的免费在线教程|那些免费的砖