1
2
3

claude --debug                          # 完整 debug 输出
claude --debug "api,hooks"              # 只看特定类别
claude --debug-file /tmp/claude-debug.log  # 写入文件，保持终端整洁

1
2
3
4
5
6
7
8
9
10
11
12

// .claude/settings.json
{
  "hooks": {
    "PostToolUse": [{
      "matcher": "*",
      "hooks": [{
        "type": "command",
        "command": "python3 /path/to/logger.py"
      }]
    }]
  }
}

1
2
3
4
5

export CLAUDE_CODE_ENABLE_TELEMETRY=1
export CLAUDE_CODE_ENHANCED_TELEMETRY_BETA=1   # 开启 Traces（beta）
export OTEL_TRACES_EXPORTER=otlp
export OTEL_LOGS_EXPORTER=otlp
export OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318

一、问题代码

先看引发讨论的这段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const debounceOpenRecomfirmPopup = debounce(
(resolve) => {
// 记录 Promise resolve，等待关闭回调传回 actionCode
recomfirmPopupPromiseResolve.value = resolve as (actionCode: 'confirm' | 'cancel' | 'close') => void
// 打开二次确认弹窗
isShowRecomfirmPopup.value = true
},
300
)

// 利息换超市卡二次确认弹窗：打开
const openRecomfirmPopupAsync = () => {
return new Promise<'confirm' | 'cancel' | 'close'>((resolve) => {
debounceOpenRecomfirmPopup(resolve)
})
}

第一眼看上去会有几个疑问：

• 防抖的回调里再去记录 Promise 的 resolve，打开和完成是断开的，顺序怎么保证？
• 这是某种「高级稳定」的写法吗？
• 我是不是应该照着学？

直觉是对的——这不是值得照搬的高级模式，而是一个把两个机制硬耦合在一起的 workaround。

二、为什么这段代码别扭

2.1 完整的执行链路

1. 调用 openRecomfirmPopupAsync()：创建 Promise，把 resolve 传给 debounceOpenRecomfirmPopup。
2. 防抖 300ms 后才执行：把 resolve 存到 recomfirmPopupPromiseResolve.value，并打开弹窗。
3. 弹窗关闭：handleRecomfirmClose 调用存起来的 resolve(actionCode)，Promise 才算完成。

2.2 顺序隐患：debounce 会吞掉 resolve

如果用户快速连续触发两次 openRecomfirmPopupAsync()：

• 第一次的 resolve 被防抖吞掉了（不执行），但对应的 Promise 已经挂起在等待。
• 防抖只执行最后一次回调，第二次的 resolve 覆盖了 recomfirmPopupPromiseResolve.value。
• 第一次的 Promise 永远不会被 resolve —— 直接挂死。

核心问题：防抖的语义是「只保留最后一次调用」，而 Promise 的语义是「每次调用都必须有结果」。把 resolve 丢进 debounce，相当于允许「Promise 完成事件」被静默丢弃。

2.3 「resolve 外挂到 ref」本身也不稳

• 依赖一个全局 ref 做中转，任何地方意外清空就会挂死。
• 和 Vue 响应式系统混用，调试困难。
• 弹窗如果走了非预期路径（组件销毁、路由跳转、异常），resolve 永远不会被调用，Promise 泄漏。

三、它想做的事：Deferred Pattern

抛开实现，这段代码的实质意图非常简单：

弹窗打开 → 等用户操作 → 拿到结果继续。

业务代码希望能这样写：

1
2
3
4

// 一气呵成，逻辑连贯
const actionCode = await openRecomfirmPopupAsync()
if (actionCode === 'cancel') return false
// 继续下单...

但弹窗本身是异步的：

1. isShowRecomfirmPopup = true 打开它；
2. 用户看到弹窗，点击「确认 / 取消」；
3. Vue 组件 emit close 事件，传回 actionCode。

步骤 2 是不可预测的时间间隔——你不可能在打开弹窗后同步拿到结果。这正是 Promise 的用武之地。

Promise 的本质：把「未来才会发生的结果」变成一个现在就能持有的对象。

这种「把异步操作和它的完成控制权解耦」的模式，就是 Deferred Pattern（延迟对象模式）。

四、Deferred Pattern 详解

4.1 Promise vs. Deferred

4.2 基础实现

在现代 JavaScript 里，可以用一个工具函数构造 Deferred：

1
2
3
4
5
6
7
8
9
10
11

function createDeferred<T>() {
let resolve!: (value: T) => void
let reject!: (reason?: unknown) => void

const promise = new Promise<T>((res, rej) => {
resolve = res
reject = rej
})

return { promise, resolve, reject }
}

要点：

• resolve / reject 在构造函数中被「偷出来」赋值给外部变量。
• 返回一个三件套：promise 给消费方 await，resolve / reject 给控制方调用。

4.3 适用场景

• 解耦异步逻辑：开始和结束不在同一个作用域里（事件监听、Socket 消息、弹窗回调等）。
• 封装回调式 API：旧接口不便直接塞进 new Promise 构造函数时，用 Deferred 当外挂。
• 跨函数共享 resolve：多个回调函数协同决定一个 Promise 的命运。

五、现代标准：Promise.withResolvers()

ECMAScript 2024 (ES15) 已经把这个模式标准化了，直接内置：

1
2
3
4
5
6
7

const { promise, resolve, reject } = Promise.withResolvers<string>()

setTimeout(() => {
resolve('任务完成！')
}, 2000)

promise.then(console.log)

以后写 Deferred 不需要再手撸 createDeferred，直接用原生 API 即可。

六、为什么 Promise 一开始是 pending

回到最初的疑问：

点击下单要打开二次弹窗时，openRecomfirmPopupAsync 返回的 Promise 里也没立刻 resolve 啊，它一直在 pending —— 这是怎么工作的？

答案是：resolve 是一个普通函数对象，可以被传递、存储、延后调用。Promise 不需要在创建时就完成。

6.1 执行时间线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

时间 0ms ─── 业务代码调用 openRecomfirmPopupAsync()
│
│  new Promise(resolve => debounceOpenRecomfirmPopup(resolve))
│  → resolve 被当作参数传进 debounce，但 debounce 不立即执行
│  → 此时 Promise 状态：pending，resolve 函数"悬空"
│  → await 暂停，业务代码停在这里等待
│
时间 300ms ─── debounce 延迟结束，执行回调
│
│  recomfirmPopupPromiseResolve.value = resolve   ← resolve 被存起来
│  isShowRecomfirmPopup.value = true              ← 弹窗打开
│
│  → Promise 状态：仍然是 pending
│  → 但现在 resolve 有了"持有者"（ref），未来可以被调用
│
时间 ?s ─── 用户在弹窗里点了确认 / 取消 / 关闭
│
│  handleRecomfirmClose({ actionCode })
│  recomfirmPopupPromiseResolve.value?.(actionCode) ← resolve 被调用
│  recomfirmPopupPromiseResolve.value = null         ← 清理
│
│  → Promise 状态：pending → fulfilled，值 = actionCode
│  → await 恢复执行，业务代码拿到 'confirm' / 'cancel' / 'close'

6.2 类比：事件监听

这就像你给 addEventListener 注册了一个回调：事件没触发时回调当然不会执行，但回调已经「挂上」了。Promise 的 resolve 也是同理：

1
2
3
4
5
6

const promise = new Promise((resolve) => {
// resolve 是一个函数，可以像任何变量一样被传递
// 传给 debounce、存到 ref、传给另一个函数——都可以
// 只要最终有人调用 resolve(值)，Promise 就会完成
debounceOpenRecomfirmPopup(resolve)
})

Deferred Pattern 的核心就是：把「何时完成」的决定权从 Promise 内部移到了外部。

• 普通 Promise 是内部自治的（网络请求成功就 resolve）。
• Deferred 是外部控制的（弹窗关闭才 resolve）。

七、更干净的写法

回到最初那段代码，改造方向有两个原则：

1. 防双击应该在 UI 层做（按钮点击节流），不要和 Promise 机制纠缠。
2. resolve** 不要散落在 ref 里，尽量保持在同一个闭包内管理。**

方案 A：用 Deferred 工具函数封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function createDeferred<T>() {
let resolve!: (value: T) => void
let reject!: (reason?: unknown) => void
const promise = new Promise<T>((r, j) => { resolve = r; reject = j })
return { promise, resolve, reject }
}

// 弹窗使用
let currentDeferred: ReturnType<typeof createDeferred<ActionCode>> | null = null

const openRecomfirmPopupAsync = () => {
currentDeferred = createDeferred<ActionCode>()
isShowRecomfirmPopup.value = true
return currentDeferred.promise
}

const handleRecomfirmClose = (actionCode: ActionCode) => {
currentDeferred?.resolve(actionCode)
currentDeferred = null
}

方案 B：直接用 Promise.withResolvers()

1
2
3
4
5
6
7
8
9
10
11
12

let pending: ReturnType<typeof Promise.withResolvers<ActionCode>> | null = null

const openRecomfirmPopupAsync = () => {
pending = Promise.withResolvers<ActionCode>()
isShowRecomfirmPopup.value = true
return pending.promise
}

const handleRecomfirmClose = (actionCode: ActionCode) => {
pending?.resolve(actionCode)
pending = null
}

方案 C：组件内部用 watchOnce 自动收尾

1
2
3
4
5
6

const openRecomfirmPopupAsync = () => new Promise<ActionCode>((resolve) => {
isShowRecomfirmPopup.value = true
watchOnce(isShowRecomfirmPopup, (val) => {
if (!val) resolve(lastActionCode.value)
})
})

三种写法的共同点：逻辑是线性的，不会丢 resolve，也没有防抖和 Promise 的耦合。

八、总结

值得学的：Deferred Pattern 的思路 —— Promise 可以拆开，手动控制完成时机。这是处理异步 UI 交互、事件驱动逻辑的标准手段。

不值得照搬的：在原代码里，把 debounce 和 Deferred 混用、把 resolve 外挂到 Vue ref —— 这是两个不相干机制的硬耦合，会带来顺序丢失和 Promise 泄漏的隐患。

一句话总结：

学到的是思路（Promise 可以手动控制完成时机），不是具体写法（debounce + ref 外挂 resolve）。

微前端是微服务概念在前端的应用。在微前端架构下，一个大型单一的前端应用被拆分成多个小型、独立的子应用，这些子应用可以独立开发、独立部署、独立运行，从而带来更加灵活高效的项目开发和管理。

作为现代前端开发的趋势，许多企业的技术栈融入了微前端，有些是选择成熟的框架如 Qiankun、Micro-App 或 Single-SPA，有些是自研解决方案。

微前端最简单的实现形式是基于Iframe。本文主要从一个简单的微前端案例入手，通过这个简单的Demo，让我们对微前端框架及其设计理念有个初步的理解。

Demo源代码讲解

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13

iframe-demo
├─ EventBus
│  └─ EventBus.js
├─ cart
│  ├─ index.html
│  ├─ script.js
│  └─ style.css
├─ catalog
│  ├─ index.html
│  └─ script.js
├─ composition.html
├─ script.js
└─ style.css

这个Demo的目录结构非常简单，主要分为三部分：

• 两个子应用cart、catalog
• 全局事件总线
• 主应用

可以看到这个简单的项目已经体现了微前端的核心设计：应用管理、隔离和共享。

应用管理

从composition.html文件我们可以看出这个项目的应用管理非常简单，两个子应用通过iframe标签加载，共同存在于同一个页面。

1
2
3
4
5

<link rel="stylesheet" href="style.css" />
<iframe src="./catalog/index.html" id="catalog"></iframe>
<iframe src="./cart/index.html" id="cart"></iframe>
<script src="script.js"></script>

隔离

由于使用的是iframe标签，两个子应用天然地存在CSS和JS隔离，不会有样式和运行时的冲突。

微前端 why iframe not div?

为什么微前端使用iframe做隔离，而不是普通div。

主要是因为iframe在浏览器中具有天然的隔离环境，主要表现在：

1. JavaScript 隔离：iframe 内的 JavaScript 运行在独立的全局上下文中。这意味着，iframe 内的 JavaScript 变量和函数不会影响到主页面，反之亦然。这种特性对于确保应用间不会相互干扰是非常重要的。
2. 样式隔离：iframe 内的样式不会影响到外部页面。每个 iframe 有自己的文档流，所以里面的 CSS 只会作用于 iframe内部，不会泄露到外部，这保证了样式的独立性和一致性。
3. DOM 隔离：每个 iframe 都有自己的 DOM 树，与主页面的 DOM 树完全隔离。这意味着，iframe 内的 DOM 操作不会影响到外部页面，减少了应用间的直接 DOM 冲突。

这些隔离特性对于普通的div标签是没有的。

共享(通信)

虽然iframe能实现简单的微前端架构，但是通过代码中设计的全局事件总线（EventBus.js文件），我们可以看出基于iframe的微前端需要单独设计跨域通信方式。

本案例主要是通过PostMessage方法实现的。PostMessage 是一种安全地实现不同浏览器窗口（包括弹出窗口和iframe）间通信的方式。允许不同源（origin）的窗口进行数据交换，从而克服了同源策略的限制。适用于多种场景，如页面与弹出窗口、页面与嵌入的iframe、甚至是不同的web workers之间的通信。

基本用法
包括两部分：发送消息和接收消息。

发送消息: window.postMessage
这个方法接受两个参数：要发送的消息和消息接收方的源（origin）。但出于安全考虑，这通常不推荐。

1

otherWindow.postMessage(message, targetOrigin); // otherWindow 是另一个窗口的引用，例如一个 iframe 或者通过 window.open 打开的窗口

• message：你想要发送的数据。
• targetOrigin：指定目标窗口的源，例如 “https://example.com“。这是一种安全机制，用来确保消息只被预期的接收者接收。如果你不关心目标窗口的源，也可以使用 “*” 作为通配符。

**接收消息：**在目标窗口添加一个事件监听器来监听 message 事件

1
2
3
4
5
6
7
8
9

window.addEventListener("message", (event) => {
    // 可以通过 event.origin 检查消息来源的源
    if (event.origin !== "<http://expected-origin.com>") {
        return; // 忽略来自不期望源的消息
    }

    // 处理接收到的数据
    console.log(event.data);
});

在本项目中，composition主应用的JS脚本中注册了message事件监听，将基座应用接收到的消息转发给所有子应用。

1
2
3
4
5
6
7

const sendReceivedMessageToAllIframes = (event) => {
  document
    .querySelectorAll('iframe')
    .forEach((iframe) => iframe.contentWindow.postMessage(event.data, '*'));
};
window.addEventListener('message', sendReceivedMessageToAllIframes);

在catalog子应用中，注册了一个全局事件总线，并且给按钮注册了点击事件，当按钮点击后，会触发productToCart事件，在该事件中，会向主应用发送消息。

最终该消息会经过主应用，接着由cart子应用中的全局事件总线接收，执行add方法。

大致的交互示意图如下所示：

总结

一个 iframe 具备四层能力：文档的加载能力、HTML 的渲染能力、独立执行 JavaScript 的能力、隔离样式的能力。这些能力，其实也是微前端项目设计的核心要求。通过学习本项目，我们可以很好地初步学习微前端，为后来深入学习Single-SPA、qiankun等框架提供理论基础。

1
2
3
4
5

viewBox="x y width height"

or

viewBox="x,y,width,height"

1
2
3
4
5
6
7

<svg 
  width="100" 
  height="100" 
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" />
</svg>

1
2
3
4
5
6
7

<svg 
  width="200" 
  height="200" 
  viewBox="0 0 200 200"
>
  <circle cx="100" cy="100" r="50" />
</svg>

1
2
3
4
5
6
7

<svg 
  width="200" 
  height="200" 
  viewBox="0 0 100 100"
>
  <circle cx="100" cy="100" r="50" />
</svg>

1
2
3
4
5
6
7

<svg 
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle cx="0" cy="0" r="50" />
</svg>

1
2

输入:s1 = "abc",s2 = "bca"
输出: true

1
2

输入:s1 = "abc",s2 = "bad"
输出: false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/**
 * @param {string} s1
 * @param {string} s2
 * @return {boolean}
 */
var CheckPermutation = function(s1, s2) {
    if(s1.length !== s2.length) return false
    const [s11, s22] =[s1.toLowerCase(),s2.toLowerCase()]
    let sum1 = 0, sum2 = 0, multi1 = 1, multi2 = 1;
    for(let i=0;i<s11.length;i++){
        sum1 += s11[i].charCodeAt(0)-'a'.charCodeAt(0)+1
        sum2 += s22[i].charCodeAt(0)-'a'.charCodeAt(0)+1

        multi1 *= s11[i].charCodeAt(0)-'a'.charCodeAt(0)+1
        multi2 *= s22[i].charCodeAt(0)-'a'.charCodeAt(0)+1
    }
    return sum1 === sum2 && multi1 === multi2
};

// case1: s1="abc", s2="bca", 输出true，预期true
// case2: s1="abc", s2="bad", 输出false，预期false
// case3: s1="aac", s2="bbb", 输出false，预期false
// case4: s1="abbcdde", s2="abcccde", 输出false，预期false
// case5: s1="bkhfhqlayvlhdqmxvnkqvtkojouugfsnwmyoywkilsnubnkvhdbrltuxvoblurpfinpigajttcvkcxlylblcaocsjmwdvwepvnfr", 
// s2="mtycyvobjldulmhsuqvtrhqnisjkuxhvaxqkvpbllnkvvakxjbolefpyrtiivvwctunasbbocldflkcknmwgofngorduwlwhyfnp" false
// 输出false，预期true

1
2
3
4
5
6

0 --> 1
1 --> 10
2 --> 100
3 --> 1000
4 --> 10000
5 --> 100000

1
2
3
4
5
6
7

a --> 0 --> 1
b --> 1 --> 10
c --> 2 --> 100
...
y --> 24 --> 1000000000000000000000000
z --> 25 --> 10000000000000000000000000

1
2
3
4
5
6
7
8
9

1 << 0 = 1
1 << 1 = 10
1 << 2 = 100
1(十进制） << 3(十进制） = 1000(二进制）

1 << ('a'.charCodeAt(0)-'a'.charCodeAt(0)) = 1
1 << ('b'.charCodeAt(0)-'a'.charCodeAt(0)) = 10
1 << ('c'.charCodeAt(0)-'a'.charCodeAt(0)) = 100
1 << ('d'.charCodeAt(0)-'a'.charCodeAt(0)) = 1000

1

x ^ x = 0

1

x ^ 0 = x

1

x ^ y ^ z = x ^ z ^ y

1

x ^ y ^ z = x ^ (y ^ z)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/**
 * @param {string} s1
 * @param {string} s2
 * @return {boolean}
 */
var CheckPermutation = function(s1, s2) {
  if(s1.length !== s2.length) return false
    const [s11, s22] =[s1.toLowerCase(),s2.toLowerCase()]
  let [bitSum1, bitSum2] = [0,0]
  let [bitMulti1, bitMulti2] = [0,0]
  for(let i=0;i<s11.length;i++){
    bitSum1 += 1 << (s11[i].charCodeAt(0)-'a'.charCodeAt(0))
    bitSum2 += 1 << (s22[i].charCodeAt(0)-'a'.charCodeAt(0))

    // 异或的两条规律：交换率和任何值与自身异或，结果为0
    bitMulti1 ^= 1 << (s11[i].charCodeAt(0)-'a'.charCodeAt(0))
    bitMulti2 ^= 1 << (s22[i].charCodeAt(0)-'a'.charCodeAt(0))
  }
  return bitSum1 === bitSum2 && bitMulti1 === bitMulti2
};

// case1: s1="abc", s2="bca", 输出true，预期true
// case2: s1="abc", s2="bad", 输出false，预期false
// case3: s1="aac", s2="bbb", 输出false，预期false
// case4: s1="abbcdde", s2="abcccde", 输出false，预期false
// case5: s1="bkhfhqlayvlhdqmxvnkqvtkojouugfsnwmyoywkilsnubnkvhdbrltuxvoblurpfinpigajttcvkcxlylblcaocsjmwdvwepvnfr", 
// s2="mtycyvobjldulmhsuqvtrhqnisjkuxhvaxqkvpbllnkvvakxjbolefpyrtiivvwctunasbbocldflkcknmwgofngorduwlwhyfnp" false
// 输出true，预期true

1
2
3
4

if (spawnSync('git', ['rev-parse']).status !== 0) {
  l('not a Git repository, skipping hooks installation');
  return;
}

1
2
3
4
5
6
7
8
9
10
11

// 创建 .husky/_
mkdirSync(join(dir, '_'), { recursive: true });

// 创建 .husky/.gitignore
writeFileSync(join(dir, '.gitignore'), '_\n');

// 将husky.sh 复制到 .husky/_/husky.sh
copyFileSync(
  fileURLToPath(new URL('./husky.sh', import.meta.url)),
  join(dir, '_/husky.sh')
);

1
2
3
4

const { error } = spawnSync('git', ['config', 'core.hooksPath', dir]);
if (error) {
  throw error;
}

1
2
3
4
5
6

if (existsSync(file)) {
  appendFileSync(file, `${cmd}\n`);
  l(`updated ${file}`);
} else {
  set(file, cmd);
}

1

npm install --save-dev eslint lint-staged husky

1

npm init @eslint/config

1

npx husky install

1
2
3

module.exports = {
  '*.js': ['eslint']
};

1

npx husky add .husky/pre-commit "npx lint-staged -c .husky/lintstagedrc.js"

1
2

const testA = {
    console.log(testA);

最近在业务上遇到了一个问题是要将页面打印pdf文件，产品的预期是希望点击一个按钮，就能够将页面数据写在一个pdf上，并下载下来，需要保证pdf的内容具有很好的可读性。

评估下来这个需求的本质是要实现一个能够将HTML页面转为PDF并实现下载的功能。通过技术调研，我最终的方案是采购html2canvas + jspdf这两个库来实现，通过使用html2canvas将使用canvas将页面转为base64图片流，然后将其插入jspdf插件中，实现保存并下载pdf。

这个方案其实也是目前比较常用的一个方案，但是在实践过程中，遇到的最大问题就是分页截断的问题。当html页面超过一页A4纸的时候，页面就是出现被截断，影响了pdf的可读性。

由于网上关于分页截断的解决思路比较少，所以特意将此次的解决方案记录下来，也作为一次个人的技术成长实践。

使用 JSPDF 和 html2canvas 创建简单的 PDF文件

首先，我们开始使用 JSPDF 和 html2canvas 创建一个简单的 PDF。

创建一个 JSPDF 实例

创建一个 JSPDF 实例，设置页面的大小、方向和其他参数。参考官网可以写一个很简单的实例：https://artskydj.github.io/jsPDF/docs/index.html

1
2
3
4
5
6
7
8

var doc = new jsPDF({
  orientation: 'landscape',
  unit: 'in',
  format: [4, 2]
})

doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

生成一个pdf文件，并且在文件中写入一定内容，其实JSPDF 这个库就能做到。

但是很多场景下，我们的目标pdf中的内容会更复杂，而且还要考虑排版，所以最好的方式是引入html2canvas这个库，将页面元素转换成base64数据，然后贴在pdf中(使用addImage方法），这样就能保证页面的内容。引入了html2canvas库后，我们更多关注就是利用现成组件库、或者原生html和css实现更复杂的页面内容。

引入 html2canvas

官方文档：https://html2canvas.hertzen.com/getting-started

使用 html2canvas 捕捉 HTML 内容或特定的 HTML 元素，并将其转换为 Canvas。下面是一个简单的demo, 可以可以看到html2canvas能够将dom元素转化为一张base64图片，尝试选择页面元素可以感受到图片和文字的不同。

https://codepen.io/janice143/pen/RwvpQbZ

将html2canvas转化的图片放到pdf中

这一步我们需要使用JSPDF 的addImage方法，其语法如下：

1

addImage(imageData, format, x, y, width, height, alias, compression)

• imageData - 要添加的图像数据。可以是图像的 URL、图像的 base64 编码字符串或图像的二进制数据
• format - 图像的格式。可以是 “JPEG”、”PNG” 或 “TIFF”。
• x - 图像在 PDF 文档中的 x 坐标。
• y - 图像在 PDF 文档中的 y 坐标。
• width - 图像的宽度。
• height - 图像的高度。
• alias - 图像的别名。此别名可用于在 PDF 文档中引用图像。
• compression - 图像的压缩级别。可以是 “NONE”、”FAST” 或 “SLOW”。

下面是一串示例代码：

1
2
3
4

var doc = new jsPDF();
doc.addImage('image.jpg', 'JPEG', 10, 10, 100, 100);
doc.save('output.pdf');

此示例将在 PDF 文档的 (10, 10) 处添加一个名为 “image.jpg” 的 JPEG 图像。图像的宽度和高度将分别为 100 和 100 像素。

JSPDF 和 html2canvas结合起来用

知道上面的关键三个点，接下来我们将这三个步骤串联起来，实现一个基本的html→pdf的方案。大致步骤如下：

1. 写一个基本html页面
2. 创建jspdf实例
3. 获取页面的dom节点，使用html2canvas将其转化为base64数据流
4. 将base64数据流装载到jspdf的addImage方法中
5. 保存pdf

基于这5个步骤，可以实现基本的单页打印。

多页：比例缩放+循环移位

但是，在你实践中，你会发现2个问题：

• 页面的内容超出了pdf页面
• 打印的pdf只有一页，没有展示全部的html信息

这篇博客给了一个非常好的解决方案，其原理是：

• 通过比例缩放，实现等比展示在pdf中
• 通过循环迭代，不停移动base64的图片位置，也就是调整X,Y参数（x - 图像在 PDF 文档中的 x 坐标；y - 图像在 PDF 文档中的 y 坐标），移动使用jspdf的addPage方法新加一个pdf。

Vue前端实现HTML转PDF并导出 - 掘金

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
  // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
  PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
  // 超过一页时，分页打印（每页高度841.89）
  while (leftHeight > 0) {
    PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
    leftHeight -= pageHeight
    position -= 841.89
    if (leftHeight > 0) {
      PDF.addPage()
    }
  }
}

分页截断的挑战

尽管 JSPDF 和 html2canvas 是功能强大的工具，但是 他们也有很多槽点，比如得手动分页，手动处理分页截断的问题。等你实践到这一步，就开始面临分页截断的问题，类似的问题也有网友在Github上提出，但是底下依然没有很好的解决思路：https://github.com/parallax/jsPDF/issues/1517

好在掘金上有人分享了一个不错的方法：

jsPDF + html2canvas A4分页截断 完美解决方案（含代码 + 案例） - 掘金

概括一下，其处理分页截断的原理就是在使用addImage之前，将html进行分页，通过维护一个高度位置数据，来记录每次循环迭代addImage的位置。

从高到低遍历维护一个分页数组pages，该数组记录每一页的起始位置，如：pages[0] 对应 第一页起始位置， pages[1] 对应 第二页起始位置

接下来我们重点讨论如何将html进行切割，然后生成Pages这个数组。

假设html高度是1500，pdf宽高是[500, 900]，如果不用处理分页截断的问题，我们可以想到第一页（0-900）是用来承载html从高度为0到900的信息；第二页（900-1800）是用来承载html从高度900到1500的，所以Pages数组为[0, 900]。

如果要处理分页截断呢，这时候就需要计算html元素的距离打印起始位置的高度h1，以及该元素的内部高度h2，通过这两个高度来判断这个元素要不要放在下一页，防止截断。

如果h1 + h2 > 页面高度， 这时候说明这个元素不处理的就会被分页截断，所以应该要把这个元素放到第二页去渲染，这就以为这Pages记录的数据要变化，示意图如下，可以看到Pages[1]我们往上调整了，比第二页pdf的起始位置更高。

说明渲染第二页pdf的时候，要从h1开始渲染，pages数组为[0, h1]。解释为第一页pdf渲染html高度区域为0-900, 第二页pdf渲染html高度区域为h1-1500。注意到第一页渲染的时候到尾部的时候，会有部分内容和第二页头部内容重合。

为了解决这个问题，我们可以使用jspdf的rect和setFillColor方法，把重合的区域遮百处理。

1
2

pdf.setFillColor(255, 255, 255);
pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');

如何获得h1和h2

上面我们谈到了h1和h2，其中h1是元素盒子的上边距到打印区域的高度（比例缩放后的高度），h2是元素盒子的内部高度。

计算h1: [getBoundingClientRect方法](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

1
2
3

const rect = contentElement.getBoundingClientRect() || {};
const topDistance = rect.top;
return topDistance;

计算h2： offsetHeight方法

值得注意的是，因为打印区域的html元素不一定是从窗口顶部开始，所以为了计算实际的h1(元素到打印区域的顶部距离），可以采用这样的方法：

• 用getBoundingClientRect方法计算元素到窗口顶部的距离
• 循环打印之前将pages信息针对第一个元素进行一个高度校准。

1
2
3

// 对pages进行一个值的修正，因为pages生成是根据根元素来的，根元素并不是我们实际要打印的元素，而是element，
  // 所以要把它修正，让其值是以真实的打印元素顶部节点为准
  const newPages = pages.map((item) => item - pages[0]);

源代码

文章的最后，我基于这篇博客的思路，另写了一份demo，源代码如下：https://github.com/janice143/pdf-demo。与现有文章不同的是，本仓库的代码特点在于：

• 支持设置pdf打印的方向，比如横向
• 修正了高度计算问题，解决了多出一个空白页问题。掘金那篇文章计算元素高度时候没有减去容器距离顶部高度，所以导致很多新手使用那份代码的时候，会发现自己的页面顶部被裁剪到了，原因就是这个
• 支持自定义页眉页脚
• 支持扩展自定义分页方法，如果遇到复杂的组件，可以自定扩展逻辑计算高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 数组 -> 元组类型
const arr = [1,2,3]
// 获取下标为1的元素，arr[1]
const v = arr[1] // 2

type Arr = [1,2,3]
// 通过下标索引类型获取某个类型元素，Arr[1]
type t = arr[1] // 2

// 对象 -> 对象类型
const obj = {
  name: "John",
  age: 23,
};
const name = obj.name; // 'John'

interface Obj {
  name: string;
  age: number;
}

type Name = Obj["name"]; // string

1
2
3
4
5
6
7

const f = (num) => num;
const v1 = f(1)(); // 1
const v2 = f("str")(); // 'str'

type F<T> = T;
type T1 = F<number>; // number
type T2 = F<string>; // string

1
2
3
4
5

const ans = 2 === 1 ? true : false;
// 如果2等于1，进入true分支，否则进入false分支

type Ans = 2 extends 1 ? true : false;
// 如果2（字面量类型）是1类型的子集，进入true分支，否则进入false分支

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const reverse = (arr) => {
  const n = arr.length;
  for (let i = 0; i < n / 2; i++) {
    [arr[i], arr[n - i - 1]] = [arr[n - i - 1], arr[i]];
  }
  return arr;
};
const arr = [1, 2, 3, 4, 5];
const res = reverse(arr); // [5,4,3,2,1]

type Reverse<
  T extends number[],
  N = T["length"],
  U extends number[] = []
> = U["length"] extends N ? U : Reverse<T, N, [T[U["length"]], ...U]>;

type Target = [1, 2, 3, 4, 5];
type Res1 = Reverse<Target>; // [5,4,3,2,1]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 类型编程的加减乘除运算
type BuildArr<
  Num extends number,
  Arr extends unknown[] = []
> = Arr["length"] extends Num ? Arr : BuildArr<Num, [1, ...Arr]>;

// 减法
type Sub<T1 extends number, T2 extends number> = BuildArr<T1> extends [
  ...arr1: BuildArr<T2>,
  ...arr2: infer Rest
]
  ? Rest["length"]
  : never;

// 加法
type Add<T1 extends number, T2 extends number> = [
  ...arr1: BuildArr<T1>,
  ...arr2: BuildArr<T2>
]["length"];

// 乘法
type Mul<
  T1 extends number,
  T2 extends number,
  Res extends number = 0
> = T2 extends 0
  ? Res
  : Mul<T1, Sub<T2, 1>, Add<Res, T1> extends number ? Add<Res, T1> : never>;

// 除法
type Div<
  T1 extends number,
  T2 extends number,
  Res extends number = 0
> = T1 extends 0
  ? Res
  : Div<Sub<T1, T2>, T2, Add<Res, 1> extends number ? Add<Res, 1> : never>;

1
2
3
4
5
6
7

const fib = (n) => {
  if (n === 0) return 0;
  if (n === 1) return 1;
  return fib(n - 1) + fib(n - 2);
};

console.log(fib(10)); // 55

1
2
3
4
5

type Fib1<N extends number> = N extends 0
  ? 0
  : N extends 1
  ? 1
  : Fib1<Sub<N, 1>> extends infer t1 ? Add<t1 extends number ? t1 : never, Fib1<Sub<N, 2>> extends infer t2 ? t2 extends number ? t2 : never : never> : never

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// top down
const fibMemo = (n, memo = [0, 1]) => {
  if (memo[n] !== undefined) {
    return memo[n];
  }

  memo[n] = fibMemo(n - 1, memo) + fibMemo(n - 2, memo);
  return memo[n];
};

// bottom up
const fib = (n, arr = [0, 1]) => {
  for (let i = 2; i <= n; i++) {
    arr[i] = arr[i - 1] + arr[i - 2];
  }
  return arr[n];
};

1
2
3
4
5
6
7

type FibBottomUp<N extends number, Arr extends any[]=[0,1]> = 
  Arr[N] extends number
    ? Arr[N]
    : FibBottomUp<N, [ ...Arr, ...[ Add<Arr[Sub<Arr['length'], 1>], Arr[Sub<Arr['length'], 2>]> ]]>;

// 测试
type res2 = FibBottomUp<10>; // 55

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

type Matrix = [number, number, number, number]; // [a, b, c, d] represents the matrix [[a, b], [c, d]]
type MatrixMultiply<A extends Matrix, B extends Matrix> = [
  Add<Mul<A[0], B[0]>, Mul<A[1], B[2]>>,
  Add<Mul<A[0], B[1]>, Mul<A[1], B[3]>>,
  Add<Mul<A[2], B[0]>, Mul<A[3], B[2]>>,
  Add<Mul<A[2], B[1]>, Mul<A[3], B[3]>>
];

type MatrixPower<M extends Matrix, N extends number> = N extends 1
  ? M
  : IsOdd<N> extends true
  ? MatrixMultiply<
      Div<Sub<N, 1>, 2> extends infer R1
        ? R1 extends number
          ? MatrixPower<M, R1>
          : never
        : never,
      Div<Sub<N, 1>, 2> extends infer R1
        ? R1 extends number
          ? MatrixPower<M, R1>
          : never
        : never
    > extends infer R2
    ? R2 extends Matrix
      ? MatrixMultiply<M, R2>
      : never
    : never
  : MatrixMultiply<
      Div<N, 2> extends infer R1
        ? R1 extends number
          ? MatrixPower<M, R1>
          : never
        : never,
      Div<N, 2> extends infer R1
        ? R1 extends number
          ? MatrixPower<M, R1>
          : never
        : never
    > extends infer R2
  ? R2 extends Matrix
    ? R2
    : never
  : never;

type FibMatrix<N extends number> = N extends 0
  ? 0
  : N extends 1
  ? 1
  : MatrixPower<[1, 1, 1, 0], N> extends infer R1
  ? R1 extends Matrix
    ? R1[1]
    : never
  : never;

// Test
type MatrixResult = FibMatrix<15>; // 610

1

npx create-next-app@latest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

'use client';

import { Button, Upload, UploadProps, message } from 'antd';
import { FILE_PATH } from './constants';
import styles from './page.module.css';

export default function Home() {
  const props: UploadProps = {
    name: 'file',
    action: '/api/upload',
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(
          `${info.file.name} 文件上传成功, 前往 ${FILE_PATH} 查看上传文件`
        );
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    }
  };

  return (
    <main className={styles.main}>
      <div>文件上传demo</div>
      <Upload {...props}>
        <Button>上传文件</Button>
      </Upload>
    </main>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { FILE_PATH } from '@/app/constants';
import { writeFile } from 'fs/promises';
import { NextRequest, NextResponse } from 'next/server';
import { join } from 'path';

export async function POST(request: NextRequest) {
  const data = await request.formData();
  const file: File | null = data.get('file') as unknown as File;

  if (!file) {
    return NextResponse.json({ message: '请上传文一个件', code: 400 });
  }

  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes);

  const path = join(FILE_PATH, file.name);
  await writeFile(path, buffer);
  console.log(`open ${path} to see the uploaded file`);

  return NextResponse.json({ data: null, message: 'success', code: 200 });
}

1

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryiI4jCWvT8XkA2pgg

1
2

Form Data
file: (binary)

1

type/subtype

1

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryiI4jCWvT8XkA2pgg

1
2
3
4

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="file" value="请选择文件"><br />
  <input type="submit">
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const express = require('express');
const app = express();
const multer = require('multer');

// 配置文件上传
const storage = multer.memoryStorage();
const upload = multer({ storage });

// 处理文件上传
app.post('/upload', upload.single('file'), (req, res) => {
  const blobData = req.file.buffer; // Blob数据可以在req.file.buffer中找到
  // 在这里对blobData进行处理，保存到磁盘或数据库
  res.status(200).json({ message: 'File uploaded successfully' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

1
2
3
4
5

type t1 = (a: number) => number;
type t2 = (a: string) => string;

const f1: t1 = (a) => a;
const f2: t2 = (a) => a;

1
2
3
4
5
6
7
8
9
10
11

// 泛型函数1：类似普通函数的定义
const generics_f1 = <T>(a: T): T => a;

// 泛型函数2：泛型类型
const generics_f2: <T>(a: T) => T = (a) => a;

// 泛型函数3：对象字面量形式的泛型类型
const generics_f3: { <T>(a: T): T } = (a) => a;

const f3 = generics_f1<number>;
const f4 = generics_f1<string>;

1
2

const generics_complex_f: <T>(a: T) => U = (a) => b;
// U = F(T), b = f(a)

1

const message: string = "Hello, World!";

1
2
3
4
5
6
7
8
9
10
11
12
13

let user = {
  name: "Bob",
  login: "robert",
  age: 30,
  comments: [],
};

type User = {
  name: string;
  login: string;
  age: number;
  comments: Comment[];
};

1
2
3
4

type A = 'foo'; // 全局作用域
type B = A extends infer C ? (
    C extends 'foo' ? true : false // 局部作用域：C类型变量只在该表达式中有用
) : never

1
2
3
4
5

type R = 'a' extends string ? true : false; // true
type S = 'a' | 'b' extends number ? true : false; // false

type T = { a: 1; b: 2 } extends { a: 1 } ? true : false; // true
type U = { a: 1 } extends { a: 1; b: 2 } ? true : false; // false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 对象
const person = { age: 12; name: 'John'; alive: true };
const Age = person["age"]; // 12

type Person = { age: number; name: string; alive: boolean };
type Age = Person["age"]; // number

// 数组（元祖）
const names = ['John', 'Bob'];
const name1 = names[0] // John

type Names = string[]
type Name = Names[number] // string
type Name1 = Names[1] // string

type Tuple = [string, number]
type Age = Tuple[1] // string

1
2
3
4
5
6
7
8
9
10

type Person = { age: number; name: string; alive: boolean };
     
type Age = number
type I1 = Person["age" | "name"]; // number | string
      
type I2 = Person[keyof Person]; // number | string | boolean

 
type AliveOrName = "alive" | "name";
type I3 = Person[AliveOrName]; // string | boolean

1
2
3
4
5
6
7
8
9
10
11
12

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">; 

// type TodoPreview = {
//     title: string;
//     completed: boolean;
// }

1
2
3
4
5
6
7
8
9
10

const todo = {
  title: "1",
  description: "1",
  completed: true,
};
const pick = (obj, keys) => keys.map((key) => ({ [key]: obj[key] }));

const res = pick(todo, ["title", "completed"]);

console.log(res); // [ { title: '1' }, { completed: true } ]

1
2
3

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

1
2
3
4
5
6
7

function getName<T=string>(name: T): T {
  return name;
}

let name1 = getName<string>("myString"); // myString
let name2 = getName("myString"); //myString
let name3 = getName<number>(1); // 1

1
2
3
4
5
6
7
8
9
10

const obj = {
  name: "John",
  gender: "male",
  age: 23,
};
for (const key in obj) {
  obj[key + "_suffix"] = obj[key];
  delete obj[key];
}
console.log(obj); // { name_suffix: 'John', gender_suffix: 'male', age_suffix: 23 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

type Obj = {
  name: string,
  gender: string,
  age: number;
};

type NewObj<T> ={
  [T in keyof Obj as `${T}_suffix`]: Obj[T];
}
 
// type NewObj<T> = {
//     name_suffix: string;
//     gender_suffix: string;
//     age_suffix: number;
// }

1
2
3
4
5
6
7
8

type NewObj1<T> ={
  [T in keyof Obj as Obj[T] extends number ? never : T ]: Obj[T];
}

// type NewObj1<T> = {
//     name: string;
//     gender: string;
// }

1
2
3

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const string = "2023-08-13";
const result = string.replace(regex, "$2/$3/$1");

1
2
3
4
5
6
7

type Str = 'foo-bar'
type Bar = Str extends `foo-${infer rest}` ? rest : never // 'bar'

type Arr = [1,2,3,4,5]
type First = Arr extends [infer F, ...infer Rest] ? F : never // 1
type Last = Arr extends [...infer Rest, infer L] ? L : never // 5
type Mid = Arr extends [infer F, ...infer Rest, infer L] ? Rest : never // [2,3,4]

1
2
3
4
5
6
7
8
9
10
11
12
13

const target = [1, 2, 3, 4, 5];

const reverse = (target, n = target.length, arr = []) => {
  if (arr.length === n) {
    return arr;
  }
  const pre = arr;
  const cur = target[arr.length];
  return reverse(target, n, [cur, ...pre]);
};

const res = reverse(target);
console.log(res); // [5,4,3,2,1]

1
2
3
4
5
6
7
8

type reverse<
  T extends number[],
  N = T["length"],
  U extends number[] = []
> = U["length"] extends N ? U : reverse<T, N, [T[U["length"]], ...U]>;

type target = [1, 2, 3, 4, 5];
type res1 = reverse<target> // [5,4,3,2,1]

1
2
3
4
5
6
7

const fib = (n) => {
  if (n === 0) return 0;
  if (n === 1) return 1;
  return fib(n - 1) + fib(n - 2);
};

console.log(fib(6)); // 8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

type Fib<T extends number> = T extends 0
  ? 0
  : T extends 1
  ? 1
  : Add<Fib<Sub<T, 1>>, Fib<Sub<T, 2>>>;

type Sub<T1 extends number, T2 extends number> = BuildArr<T1> extends [
  ...arr1: BuildArr<T2>,
  ...arr2: infer Rest
]
  ? Rest["length"]
  : never;

type Add<T1 extends number, T2 extends number> = [
  ...arr1: BuildArr<T1>,
  ...arr2: BuildArr<T2>
]['length'];

type BuildArr<
  Num extends number,
  Arr extends unknown[] = []
> = Arr["length"] extends Num ? Arr : BuildArr<Num, [1, ...Arr]>;

type res= Fib<6> // 8