整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
和往常一樣，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，唯一需要注意的就是解決字體問題，但是上文也提到過解決方案，感興趣的可以進行體驗！
了保證的可讀性，本文采用意譯而非直譯。
什么是JavaScript
JS 是一種用于 web 的腳本語言。JS 誕生于 1995 年，由 **Brendan Eich **一手創建，用于向web頁面添加交互性。那時的互聯網還處于起步階段，我們今天看到的大多數花哨的網頁在那時候還只是一個夢。
在項目經理的催促下，Brendan 只有 10 天的時間來創建一種可以在瀏覽器中運行的動態、靈活的語言。他寫出了 JavaScript，一種有點奇怪的編程語言，它參考了 Java、C 和 Scheme。JS 一直名聲不好，因為它從一開始就有很多怪異的地方。但盡管如此，它還是在名人堂占據了一席之地，并一直挺到了今天。
現在，JS 被用來創建整個應用程序，稱為SPA(單頁應用程序)。隨著使用量的增加，JS 生態系統也經歷了寒武紀大爆發。咱們今天用于開發 JS 的大多數 Web 工具和庫,很多用 JS 寫的。JS 也被用于除前端方面的領域。使用 Node.js 咱們可以創建服務器端和物聯網應用程序，工業設備，以及更多。但最重要的是，單頁應用程序是 JS 最突出的用法之一。
在單頁面應用中，JS 負責所有的事情，使 UI 流暢，無需任何頁面刷新。從用戶的角度來看，這是對傳統 web 應用程序的巨大改進。但是，能力越大，責任越大: JS 對于大多數移動設備來說是一個沉重的負擔，在設計和構建時應該格外小心。、
為什么要學 JavaScript
今天學習 JS 并不意味著對變量和函數的膚淺理解:還有很多。JS 開發人員知道閉包、this、new、原型系統和更新的特性。JS 一年比一年流行，功能也逐漸完善。現在幾乎每個前端開發人員的工作都需要 JS 知識。招聘經理尋找的不是會使用 JQ (說到jQuery，它似乎正在慢慢消亡) 的。
大多數情況下，你也需要了解學習 TypeScript, 強調類型的 JS。前端開發人員應該要理解 JS 的特性，并能夠編寫慣用的、結構良好的 JS 代碼。JS 正在迅速傳播，即使你不喜歡這種語言，在這一點上忽視它也可能對你的職業生涯不利。
JS 目前有 7 種基本類型，如下：
除了 Object 是復雜數據類型外，其它的 6 種是 JS 的基本數據類型。每個 JS 類型都有一個對應的表示，可以在咱們的代碼中使用，比如字符串:
var string = "Hello John";
數字：
var age = 33;
說到這里，JS 也有算術運算：
運算符運算名+加法++自增*乘法**指數-減--自減/除%取除
在 JS 中，可以使用 var 關鍵字將值存儲在變量中，這是聲明變量的最兼容方法：
var greet = "Hello"; var year = 89; var not = false;
這里說的兼容，是因為在 ES6 中我們還有兩個選擇: let 和 const。舊的瀏覽器可能不支持這些新的關鍵字，除非使用“轉置器”，否則可能會遇到錯誤。在新的瀏覽器中，建議用 let 和 const 。主要有兩個好處：
塊作用域是指用 let 或 const 聲明的變量與在封閉或外部塊中聲明的相同變量名不重疊。例如：
let name = "前端小智";
{
let name = "王大冶";
console.log(name); // "王大冶"
}
console.log(name); // "前端小智"
這里的 name 似乎是重復的，但實際上是兩個不同的變量在自己的作用域里。const 具有相同的行為：
const name = "前端小智";
{
const name = "王大冶";
console.log(name); // "王大冶"
}
console.log(name); // "前端小智"
與 var 的行為就與 let 和 const 不一樣了。
var name = "前端小智";
{
var name = "王大冶";
console.log(name); // "王大冶"
}
console.log(name); // "王大冶"
正如前端所說，const 不能被重新分配，也不能在同一個作用域中重新聲明。如果你嘗試重新聲明一個 const，會得到 "SyntaxError: Identifier has already been declared"。如果將某個值重新賦值給同一個 const，會得到 "TypeError: Assignment to constant variable"錯誤。
const name = "前端小智"; const name = "王大冶"; // SyntaxError: Identifier 'name' has already been declared
下面代碼也會拋出錯誤：
const name = "前端小智"; name = "王大冶"; // TypeError: Assignment to constant variable.
但是，請注意，這里所說的 “cons 不能重新分配，也不能重新聲明” 時，并不意味著const是不可變的。
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
這是初學者都會遇到的問題。事實上，任何稍微復雜一點的 JS 數據結構，如數組或對象，即使在分配給 const 時，它們的值或者屬性值是可變的，不可變是指這些復雜對象的內存地址。
const person = {
name: "前端小智",
age: 21
};
person.name = "王大冶";
console.log(person);
// {name: "王大冶", age: 21}
const 對象中的不可變是指什么？下面是數組：
const list = [1, 1, 3, 2, 5]; list.shift(); console.log(list); // [ 1, 3, 2, 5 ]
同樣，不是不可變。有人說 “const 是不可變” 時，請給他看這些例子。現在回到基礎。除了獨立變量之外，還可以使用字面量的方式聲明數組：
var array = ["Hello", 89, false, true];
從 0 開始的索引可以訪問數組元素：
var array = ["Hello", 89, false, true]; var first = array[0]; // "Hello"
幾乎所有 JS 實體都附加了一些函數，稱為方法。舉兩個例子，數組有很多處理自身的方法
var array = ["Hello", 89, false, true]; array.push(99); array.shift(); console.log(array); // [ 89, false, true, 99 ];
對于字符串也是一樣的:
var string = "John"; console.log(string.toUpperCase()); // JOHN
在第 5 章中，你會知道這些方法從何而來，但這里有一個提示:它們分別在 Array.prototype和 String.prototype 上定義。除了方法之外，還有一些屬性對于提取關于字符串長度的信息非常有用：
var string = "John"; console.log(string.length); // 4
或者數組的長度：
var array = ["Hello", 89, false, true]; array.push(99); array.shift(); console.log(array.length); // 4
這些屬性有些特殊，因為它們被稱為 "getters"/"setters"。你可以想象一個給定的字符串就像一個附加了一堆方法和屬性的對象。當訪問數組的長度時，你只需調用相應的 getter。setter 函數用于設置操作:
var array = {
value: ["Hello", 89, false, true],
push: function(element) {
//
},
shift: function() {
//
},
get length() {
// gets the length
},
set length(newLen) {
// sets the length
}
};
// Getter call
var len = array.length
// Setter call
array.length = 50;
現在，咱們已經奠定了基礎，讓我們仔細看看對象，它是最重要的 JS 類型之一。
站在對象的肩膀上
Object 是 JS 中最重要的類型，因此幾乎所有其他實體都可以從中派生。例如，函數和數組是專用對象。JS 中的對象是鍵/值對的容器，如以下示例（字面量形式）：
var obj = {
name: "John",
age: 33
};
還有另一種創建對象的方法，但它很少見，性能低，請避免使用這種形式：
var obj = new Object({
name: "John",
age: 33
});
正如你所看到的，對象是保存值的一種方便方法，稍后可以通過訪問相應的屬性來檢索這些值：
var obj = {
name: "前端小智",
age: 26
};
console.log(obj.name); // "前端小智"
咱們還可以添加新屬性、刪除或更改它們
var obj = {
name: "前端小智",
age: 26
};
obj.address = "王大冶";
delete obj.name;
obj.age = 18;
對象的鍵也可以是字符串，在本例中，我們使用方括號符號訪問屬性：
var obj = {
name: "前端小智",
age: 26,
"complex key": "stuff"
};
console.log(obj["complex key"]); // "stuff"
但是，點表示法更常見，除非鍵是復雜的字符串，否則應該選擇傳統的屬性訪問：
var obj = {
name: "前端小智",
age: 26
};
console.log(obj.name); // "前端小智"
這是咱們所有需要知道的基本知識，但在 第5章，我們將看到 JS 對象是非常強大的，可以做更多。現在來看看 JS 函數。
5 種不同的 JS 函數
幾乎每種編程語言都有函數，JS 也不例外。函數是可重用的代碼段。考慮以下示例
function hello(message) {
console.log(message);
}
hello("Hello");
和
function sum(a, b) {
return a + b;
}
var sum = sum(2, 6);
第一個函數打印一個字符串，第二個函數向外部世界返回一個值。正如你所看到的，函數可以接受參數，列在函數“簽名”中：
// a 和 b 是函數簽名中的參數
function sum(a, b) {
return a + b;
}
咱們可以在調用函數時傳遞值：
// a and b are parameters in the function's signature
function sum(a, b) {
return a + b;
}
// 2 和 6 是該函數的參數
var sum = sum(2, 6);
用 function 關鍵字聲明的 JS 函數是常規函數，與沒有主體的函數相反常規函數可以呈現多種形式：
命名函數是最傳統的函數類型：
function sum(a, b) {
return a + b;
}
另一方面，匿名函數沒有名稱，可以分配給一個變量供以后使用
var sum = function(a, b) {
return a + b;
};
或者用作其他函數中的回調：
var button = document.createElement("button");
button.addEventListener("click", function(event) {
// do stuff
});
函數也可以存在于對象中，這種稱為該對象的方法：
var widget = {
showModal: function() {
// do stuff
}
};
widget.showModal();
常規函數在默認情況下也會得到一個 this 關鍵字，它可以根據調用函數的方式賦予不同的含義。在第六章中，我們將詳細探討這個主題。現在有一個簡單的規則:在一個對象內部運行的函數有 this 指向包含對象的指針
var widget = {
html: "<div></div>",
showModal: function() {
console.log(this.html);
}
};
widget.showModal(); // "<div></div>"
在 ES6 中，你也可以使用對象方法簡寫：
var widget = {
showModal() {
// object method shortand
}
};
widget.showModal();
最后，IIFE (立即執行的函數)：
var IIFE = (function() {
// what happens in an IIFE stays in the IIFE
})();
語法可能看起來有點奇怪，但是 IIFE 非常強大，在第4章會看到它們。除了常規函數外，還有箭頭函數，在 ES6 中添加。箭頭函數不使用 function 關鍵字，但它們具有相似的形式：
箭頭函數很方便，但我建議不要過度使用它們。這是一個命名的箭頭函數。如果沒有參數，可以省略 return 語句并使用圓括號：
const arrow = () => console.log("Silly me");
如果你需要在箭頭函數中計算一些東西或者調用其他函數，可以用花括號包含一個主體
const arrow = () => {
const a = callMe();
const b = callYou();
return a + b;
};
花括號也是定義對象的字面量形式，這并不意味著咱們可以做類似的事情：
const arrow = () => {
a : "hello",
b: "world"
};
這是無效的語法。要從箭頭函數返回對象，可以使用圓括號：
const arrow = () => ({
a: "hello",
b: "world"
});
console.log(arrow());
// { a: 'hello', b: 'world' }
或者使用 return 語句：
const arrow = () => {
return {
a: "hello",
b: "world"
};
};
與常規匿名函數一樣，也有匿名箭頭函數。這里有一個作為回調傳遞給另一個函數
const arr = [1, 2, 3]; const res = arr.map(element => element + 1); console.log(res); // [ 2, 3, 4 ]
它以 element 為參數，并為每個數組元素返回 element +1。如你所見，如果箭頭函數只有一個參數，則無需在其周圍加上括號：
const fun = singleParameter => singleParameter + 1;
但如果你需要更多的參數，括號是必需的：
const fun = (a, b) => a + b + 1;
箭頭函數也可以作為對象方法出現，但是它們的行為與常規函數不同。在前一段介紹了 this 關鍵字，它是對運行函數的對象的引用。當作為對象方法調用時，常規函數將 this 指向宿主對象
var widget = {
html: "<div></div>",
showModal: function() {
console.log(this.html);
}
};
widget.showModal(); // "<div></div>"
而箭頭函數中的 this 則指向完全不同的東西:
var widget = {
html: "<div></div>",
showModal: () => console.log(this.html)
};
widget.showModal(); // undefined
因此，箭頭函數不太適合作為對象方法，但是有一些有趣的用例，在本小冊中，咱們將了解為什么以及何時有效使用它們。最后，來看一下 IIFE 箭頭函數：
(() => {
console.log("aa");
})();
令人困惑的語法不是嗎? 接著咱們將進入下一章。
傳遞參數
ECMAScript 中所有函數的參數都是按值傳遞的。也就是說，把函數外部的值復制給函數內部的參數，就和把值從一個變量復制到另一個變量一樣。基本類型值的傳遞如同基本類型變量的復制一樣，而引用類型值的傳遞，則如同引用類型變量的復制一樣。有不少開發者在這一點上可能會感到困惑，因為訪問變量有按值和按引用兩種方式，而參數只能按值傳遞。
在向參數傳遞基本類型時，被傳遞的值會被復制給一個局部變量（即命名參數，或者用 ECMAScript 的概念來說，就是 arguments 對象中的一個元素）。在向參數傳遞引用類型的值時，會把這個值在內存中的地址復制給一個局部變量，因此這個局部變量的變化會反映在函數的外部。請看下面的例子：
function addTen（）{
num += 10；
return num
}
var count = 20;
var result = addTen(count);
alert(count); // 20 沒有變化
alert(result); // 30
這里的函數 addTen () 有一個參數 num ，而參數實際上是函數的局部變量。在調用這個函數時，變量 count 作為參數被傳遞給函數，這個變量的值是 20。于是，數值 20 被復制給參數 num 以便在 addTen() 中使用。在函數內部，參數 num 的值被加上了 10，但這一變化不會影響函數外部的 count 變量。參數的值也將變成 30，從而反映函數內部的修改。當然，使用數值等基本類型值來說明按值傳遞參數比較簡單，但如果使用對象，那問題就不怎么好理解了。再舉一個例子：
function setName (obj) {
obj.name = '前端小智';
}
var person = new Object();
setName(person);
alert(person.name) // "前端小智"
以上代碼創建一個對象，并將其保存在了變量 person 中。然后，這個變量被傳遞到 setName() 函數中之后就被復制給了 obj。在這個函數內部， obj 和 person引用的是同一個對象。于是，當在函數內部為 obj 添加 name 屬性后，函數外部的 person 也將有所反映；因為person指向的對象在堆內存中只有一個，而且是全局對象。
有很多開發者錯誤的認為：在局部作用域中修改的對象會在全局作用域中反映出來，就說明參數是按引用傳遞。為了證明對象是按值傳遞的，我們再看一看下面這個經過修改的例子：
function setName(obj) {
obj.name = '前端小智';
obj = new Object();
obj.name = '王大冶'
}
var person = new Object();
setName(person);
alert(person.name) // '前端小智'
這個例子與前一個例子的唯一區別，就是在 setName() 函數中添加了兩行代碼：一行代碼為 obj 重新定義了一個對象，另一行代碼為該對象定義了一個帶有不同值的 name 屬性。在把 person 傳遞給 setName() 后，其 name 屬性被設置為 ‘前端小智’。然后，又將一個新對象賦給變量 obj，同時將其 name 屬性設置為 '王大冶'。
如果 person 是按引用傳遞的，那么 person 就會自動被修改為指向其 name 屬性為 ‘王大冶'的新對象。但是原始的引用仍然保持不變。實際上，當在函數內部重寫 obj 時，這個變量引用就是一個局部對象了。而這個局部對象會在函數執行完畢后立即被銷毀。
總結
JS 具有七個稱為 “類型” 的基本構建塊，其中 6 個也稱為基本數據類型。Object 本身就是一種類型，也是該語言最重要的實體。對象是用于一對鍵/值的容器，并且可以包含幾乎所有其他 JS 的類型，包括函數。
與大多數其他編程語言一樣，JS 有字符串、數字、函數、布爾值和一些稱為 Null 和Undefined 的特殊類型。JS 中有兩種函數:箭頭函數和常規函數。它們都有各自的用法，根據場景使用它們。
思考
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具Fundebug。
原文：https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter1.md
https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter2.md
作者：valentinogagliardi
譯者：前端小智
來源：github
者：Joanne Lee-(Vivi)
譯者： 前端小智
來源：medium
JS 初學者總是對 this 關鍵字感到困惑，因為與其他現代編程語言相比，JS 中的這this關鍵字有點棘手。 “this” 一般是表示當前所在的對象，但是事情并沒有像它應該的那樣發生。JS中的this關鍵字由函數的調用者決定，誰調用就this就指向哪個。如果找不到調用者，this將指向windows對象。
來幾個粟子
第一個例子很簡單。 調用 test對象中的 func()，因此func() 中的'this'指向的是 test 對象，所以打印的 prop 是 test 中的 prop，即 42。
如果我們直接調用getFullname函數，第二個例子將打印出'David Jones'，因為此時 this 找不到調用者，所以默認就為 window 對象，打印的 fullname 即是全局的。
有很多方法可以解決這個問題; 但是，無論你選擇哪種解決方案，最重要的是要知道你決定讓 this 指向哪個對象。
一旦你弄清楚了this指向的對象，你就可以直接將它改成對象名。 否則，使用bind，call，apply函數也可以解決問題。
當我第一次解釋閉包時，我常說函數中的函數;但是，它沒有正確地描述閉包的確切含義。
閉包是在另一個作用域內創建一個封閉的詞法范圍。它通常會自動返回來生成這個詞法環境。這個環境由創建閉包時在作用域內的任何局部變量組成。它就像一個微型工廠，用這些原料生產出具有特定功能的產品。
閉包的另一個應用是創建私有變量和方法。JavaScript不像Java那樣可以很好地支持oop。在JS中沒有明確的方法來創建私有方法，但是閉包可以私有方法。
變量的提升是JavaScript的默認行為，這意味著將所有變量聲明移動到當前作用域的頂部，并且可以在聲明之前使用變量。初始化不會被提升，提升僅作用于變量的聲明。
var x = 1 console.log(x + '——' + y) // 1——undefined var y = 2
盡管JavaScript是一種只有一個調用堆棧的單線程編程語言，但它也可以使用一個稱為事件循環(event loop)的機制來處理一些異步函數。從基本級別了解JavaScript如何工作是理解JS如何處理異步的關鍵部分。
如圖所示，調用堆棧是定位函數的位置。一旦函數被調用，函數將被推入堆棧。然而，異步函數不會立即被推入調用堆棧，而是會被推入任務隊列(Task Queue)，并在調用堆棧為空后執行。將事件從任務隊列傳輸到調用堆棧稱為事件循環。
在DOM樹上綁定事件監聽器并使用JS事件處理程序是處理客戶端事件響應的典型方法。 從理論上講，我們可以將監聽器附加到HTML中的任何DOM元素，但由于事件委派，這樣做是浪費而且沒必要的。
什么是事件委托？
這是一種讓父元素上的事件監聽器也影響子元素的技巧。 通常，事件傳播（捕獲和冒泡）允許我們實現事件委托。 冒泡意味著當觸發子元素（目標）時，也可以逐層觸發該子元素的父元素，直到它碰到DOM綁定的原始監聽器（當前目標）。 捕獲屬性將事件階段轉換為捕獲階段，讓事件下移到元素; 因此，觸發方向與冒泡階段相反。 捕獲的默認值為false。
JavaScript中的一切都是對象，包括函數。我們可以將變量作為參數傳遞給函數，函數也是如此。我們調用接受和或返回另一個函數稱為高階函數的函數。
// 聲明函數
function hello() {
return "HELLO"
}
// 表達式函數
var h1 = function hello() {
return "HELLO"
} 兩個函數將在不同的時期定義。在解析期間定義聲明，在運行時定義表達式;因此，如果我們控制臺打印 h1，它將顯示HELLO。
9.解釋原型繼承是如何工作的
JavaScript不是一種面向對象的友好編程語言，但它仍然使用繼承的思想來實現依賴關系，并使用許多內置函數使其靈活使用。了解原型繼承的工作原理將使你很好地理解JavaScript知識，從而避免概念上的誤用。
最好在大腦中描繪一下JavaScript的整個機制，以了解原型繼承。
JavaScript中有一個超級對象，所有對象都將從中繼承。 '__ proto__'指向的對象的Prototype內部屬性。 原型(prototype )包含一個構造函數，使對象能夠從中創建實例。 __proto__始終存在于對象中，并且分層指向它所屬的原型，直到null，這稱為原型鏈。
嚴格模式用于標準化正常的JavaScript語義。嚴格模式可以嵌入到非嚴格模式中，關鍵字 ‘use strict’。使用嚴格模式后的代碼應遵循JS嚴格的語法規則。例如，分號在每個語句聲明之后使用。
原文：https://medium.com/@jlanne119/10-popular-interview-questions-of-javascript-for-front-end-developers-973c2052892e
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
