html 到 A4 上适合 table 的 pdf
html to pdf fit table on A4
我目前正在使用 html-pdf,它将我的 table 数据转换为 pdf。
我的问题是,当我更改
format
到 A3
它适合并且有效。
A4
我需要它来适应。有什么想法吗?
const dlPdfResult = (result) => {
return new Promise(function (resolve, reject) {
optionsType = {
format: 'A4',
orientation: 'landscape',
paginationOffset: 0,
header: {
'height': '10mm',
'contents': `<div style=' font-family: sans-serif, Arial, Helvetica; font-size: 11px; text-align: left; width: 842px; overflow: hidden;'><div style='width: 10%; float:left;'></div><div style='width: 40%; float:left;padding: 0px 0px 0px 60px;'>Port2Port exports</div><div style='width: 40%; float:left; text-align: right;'>Logo</div><div style='width: 10%; float:left;'></div>`
},
footer: {
'height': '10mm',
'contents': {
first: '1',
2: '2',
default: '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>',
last: 'Last Page'
},
type: 'pdf', // allowed file types: png, jpeg, pdf
quality: '75'
}
}
tableForm = tableify(result)
pdf.create(tableForm, optionsType).toFile('./test.pdf', function (err, res) {
if (err) return reject(err)
resolve(res)
})
})
}
此时我唯一的解决办法是替换我得到的 table 结果并使用 mm
添加样式并给它 max-width
。
仅举一个例子:
tableForm = tableify(result)
strip = tableForm.replace(/<td/g, `<td style='max-width: 5mm;border: 1px solid #000;overflow: hidden;word-wrap: break-word;'`)
我为所有 td
和所有 th
做了这件事。
所以我的下一个替换看起来像:
var addStyleSpacingThString = strip.replace(/<th class="string">/g, `<th class='string' style='max-width: 5mm;text-align: left;'>`)
这适合我的所有内容,我最后想提的是我的 table 本身的宽度为 100%。
<table style=' width: 100%; heigth: auto;font-size: 11px;font-family: sans-serif, Arial, Helvetica; border-collapse: collapse;'>
我目前正在使用 html-pdf,它将我的 table 数据转换为 pdf。
我的问题是,当我更改
format
到 A3
它适合并且有效。
A4
我需要它来适应。有什么想法吗?
const dlPdfResult = (result) => {
return new Promise(function (resolve, reject) {
optionsType = {
format: 'A4',
orientation: 'landscape',
paginationOffset: 0,
header: {
'height': '10mm',
'contents': `<div style=' font-family: sans-serif, Arial, Helvetica; font-size: 11px; text-align: left; width: 842px; overflow: hidden;'><div style='width: 10%; float:left;'></div><div style='width: 40%; float:left;padding: 0px 0px 0px 60px;'>Port2Port exports</div><div style='width: 40%; float:left; text-align: right;'>Logo</div><div style='width: 10%; float:left;'></div>`
},
footer: {
'height': '10mm',
'contents': {
first: '1',
2: '2',
default: '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>',
last: 'Last Page'
},
type: 'pdf', // allowed file types: png, jpeg, pdf
quality: '75'
}
}
tableForm = tableify(result)
pdf.create(tableForm, optionsType).toFile('./test.pdf', function (err, res) {
if (err) return reject(err)
resolve(res)
})
})
}
此时我唯一的解决办法是替换我得到的 table 结果并使用 mm
添加样式并给它 max-width
。
仅举一个例子:
tableForm = tableify(result)
strip = tableForm.replace(/<td/g, `<td style='max-width: 5mm;border: 1px solid #000;overflow: hidden;word-wrap: break-word;'`)
我为所有 td
和所有 th
做了这件事。
所以我的下一个替换看起来像:
var addStyleSpacingThString = strip.replace(/<th class="string">/g, `<th class='string' style='max-width: 5mm;text-align: left;'>`)
这适合我的所有内容,我最后想提的是我的 table 本身的宽度为 100%。
<table style=' width: 100%; heigth: auto;font-size: 11px;font-family: sans-serif, Arial, Helvetica; border-collapse: collapse;'>