docx 导出word,表格列数不同的效果
docx github地址 文档地址
这个列宽设的我莫名其妙的，不管了，在这个代码中没找到分割单元格的操作，所以下面的效果是通过内嵌表格，将内部表格的外边框去掉实现的
效果
代码
import {
Document,
SectionType,
Paragraph,
TextRun,
Packer,
AlignmentType,
Table,
TableRow,
TableCell,
WidthType,
VerticalAlign,
BorderStyle,
// PageOrientation,
NumberFormat
} from "docx";
import { saveAs } from "file-saver";
export class DocumentCreator {
constructor(list = []) {
const contents = list.map(item => {
return this.createContent(item)
})
this.doc = new Document({
styles: this.difinedStyles(),
sections: contents
})
this.export()
}
/**
* 返回一个段落，新的一页
*/
createContent(data) {
return {
properties: {
page: {
margin: {
left: 800,
right: 800,
top: 600,
bottom: 600
},
pageNumbers: {
start: 1,
formatType: NumberFormat.DECIMAL,
},
},
type: SectionType.NEXT_PAGE,
},
children: [
new Paragraph({
alignment: AlignmentType.CENTER,
style: "title",
children: [new TextRun("供应品台账")],
}),
new Paragraph({
alignment: AlignmentType.CENTER,
style: "title",
children: [new TextRun("")],
}),
this.createHeader(data),
],
}
}
createHeader() {
const table = new Table({
rows: [
new TableRow({
tableHeader: true,
children: [
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: '',
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "牛",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: '',
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: '6666',
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
]
}),
new TableRow({
tableHeader: true,
children: [
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: '',
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "牛啊吗",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
]
}),
new TableRow({
cantSplit: true,
tableHeader: true,
children: [
new TableCell({
margins: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
width: {
size: 10,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
columnSpan: 6,
children: [this.createBody()]
}),
]
}),
]
})
return table
}
createBody() {
return new Table({
borders: {
top: {
style: BorderStyle.NIL
},
left: {
style: BorderStyle.NIL
},
right: {
style: BorderStyle.NIL
},
bottom: {
style: BorderStyle.NIL
}
},
rows: [
new TableRow({
children: [
new TableCell({
width: {
size: 15,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "字段1",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 15,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "B",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 15,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "字段2",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 15,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "D",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 15,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "E",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 15,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "F",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
width: {
size: 15,
type: WidthType.PERCENTAGE,
},
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "G",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
new TableCell({
// width: {
// size: 15,
// type: WidthType.PERCENTAGE,
// },
verticalAlign: VerticalAlign.CENTER,
children: [new Paragraph({
text: "h",
alignment: AlignmentType.CENTER,
style: "tableHeader",
})],
}),
]
}),
]
})
}
difinedStyles() {
return {
paragraphStyles: [
{
id: "title",
name: "Title",
basedOn: "Normal",
next: "Normal",
run: {
size: 50,
bold: true,
font: {
name: '黑体',
},
}
},
{
id: "tableHeader",
name: "TableHeader",
basedOn: "Normal",
next: "Normal",
run: {
size: 26,
font: {
name: '宋体',
},
}
},
{
id: "empty",
name: "Empty",
basedOn: "Normal",
next: "Normal",
run: {
size: 0,
font: {
name: '宋体',
},
}
},
]
}
}
export() {
Packer.toBlob(this.doc).then((blob) => {
saveAs(blob, "xxxx.docx");
});
}
}