-
Notifications
You must be signed in to change notification settings - Fork 12
/
axios-browser.html
136 lines (130 loc) · 4.15 KB
/
axios-browser.html
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puppeteer Test Server</title>
<style>
.hide {
display: none;
}
.show {
display: block;
}
.code-box {
border: 1px solid red;
}
.code-inline {
code {
background-color: #eee;
border-radius: 5px;
padding: 3px 7px;
}
}
</style>
</head>
<body>
<code>
[
<br>
{
url: 'https://github.com/pdsuwwz',
},
<br>
{
url: 'https://vuejs.org/api/',
},
<br>
{
url: 'https://www.baidu.com/',
},
<br>
]
</code>
<h2>正在爬取👆网站并完成合并pdf的过程,请等待几秒钟,浏览器将自动打开下载窗口</h2>
<h2>Please wait a few seconds while we crawl the above websites and complete the PDF merge process. The browser will automatically open the download window.</h2>
<div id="error-box" class="code-box code-inline hide"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
<script>
const PORT = 5000
// const PORT = 8080
const service = axios.create({
baseURL: `http://localhost:${PORT}`,
timeout: 60000
});
const pdfList = [
{
url: 'https://github.com/pdsuwwz',
attachment: {
header: '自定义的页眉',
footer: '自定义的页脚'
},
},
{
url: 'https://vuejs.org/api/',
// 如果网站需要提前内置 sessionId cookie, 一般用作需要登录才能访问的网站,则添加此字段即可
// If the webpage needs to have a sessionId cookie built in advance,
// which is generally used as a website that can only be accessed by logging in, add this field
cookies: [
{
name: '_ga',
value: 'GA1.6.52570701.7613011974',
domain: 'vuejs.org'
}
],
// 设置此字段为 true, 则代表生成出的 PDF 将含有内边距空白
// If this field is set to true, it means that the generated PDF will contain margins
hasMargin: false
},
{
url: 'https://www.baidu.com/',
cookies: [
{
name: 'token',
value: 'fc83532c-f833-11eb-8526-0242ac130002',
domain: 'www.baidu.com'
}
],
// 展示自定义页眉页脚,前提是需要将 hasMargin 设置为 true
// Display the custom header and footer, provided that hasMargin is set to true
attachment: {
header: '这是页眉-ABC股份有限公司xxxx年度xxxx报告 — xx阶段',
footer: '这是页脚-BJxxxx07260001-AFCJ-01'
},
// 生成出来的 PDF 是否为横向
// Whether the generated PDF is horizontal
isLandscape: true,
// 是否隐藏水印
// Whether to hide watermark
hiddenWatermark: true,
},
]
service({
method: 'post',
url: '/combine-pdf',
responseType: 'blob',
data: {
pdfList
}
}).then((res) => {
const url = window.URL.createObjectURL(res.data)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = 'combine-test.pdf'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}).catch((err) => {
const errBox = document.querySelector('#error-box')
errBox.innerHTML = `
<p>Node.js 服务报错或未运行,请运行 <code>pnpm start</code> 或 <code>node dist/bundle.esm.js</code> 或 <code>node __test__/axios-node.js</code> 后再试,或请检查服务运行情况。</p>
<p>Node.js service encountered an error or is not running. Please run <code>pnpm start</code> or <code>node dist/bundle.esm.js</code> or <code>node __test__/axios-node.js</code> check the service status and try again .</p>
`
errBox.classList.add('show')
console.log(err)
})
</script>
</body>
</html>