Vue-tables-2 使用 pdfmake 库从多个选定的 table 行创建 pdf 文件
Vue-tables-2 create pdf file from multiple selected table rows using pdfmake library
我想在 vue-tables-2 中创建一个包含多个选定行的 pdf。我找到了一个名为 pdfmake 的 pdf 库,它看起来很棒。作为新手,我正在努力看看我能怎么做:
- 将其放入 vue-tables-2 组件中。我是否将其导入
组件?
- 如何创建包含多个选定 table 行数据的 pdf?我有
this.checkedRows
用于 table 数据内容。我如何将其放入 pdf 中?
我看到 pdfmake 是如何构建数据 table 内容的说明,但是我怎样才能使它与 vue-tables-2 一起工作? pdfmake table content screenshot
如果有人知道更好的 vue-tables-2 pdf 库,请告诉我。
到目前为止,这是我的代码...
<v-server-table url="/removals" :data="tableData" :columns="columns" :options="options">
<input slot="selected" slot-scope="props" type="checkbox" :checked="props.row.selected" v-model="checkedRows" :value="props.row">
<button slot="afterFilter" type="submit" @click="createPDF">Create PDF</button>
</v-server-table>
我的数据内容现在只是一个非常简单的原型:
data() {
return {
tableData: [],
checkedRows: [],
columns: [
'selected',
'sku',
],
options: {
}
}
还有我的方法...
methods: {
createPDF() {
pdfMake.createPdf(docDefinition).download('PO.pdf');
}
}
您可以使用以下命令安装 pdfmake
:
npm install pdfmake --save-dev
并按如下方式导入和使用它
<template>....</template>
<script>
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;
export default{
data() {
return {
tableData: [],
checkedRows: [],
columns: [
'selected',
'sku',
],
options: {
}
},
methods: {
createPDF() {
var docDefinition = {
content: [
{
table: {
headerRows: 1,
widths: [ '*', 'auto', 100, '*' ],
body: []
}
}
]
};
docDefinition.content[0].table.body.push(this.columns);
for(var i=0;i<this.checkedRows.length;i++){
docDefinition.content[0].table.body.push(Object.values(this.checkedRows[i]));
}
pdfMake.createPdf(docDefinition).download('PO.pdf');
}
}
}
我想在 vue-tables-2 中创建一个包含多个选定行的 pdf。我找到了一个名为 pdfmake 的 pdf 库,它看起来很棒。作为新手,我正在努力看看我能怎么做:
- 将其放入 vue-tables-2 组件中。我是否将其导入 组件?
- 如何创建包含多个选定 table 行数据的 pdf?我有
this.checkedRows
用于 table 数据内容。我如何将其放入 pdf 中?
我看到 pdfmake 是如何构建数据 table 内容的说明,但是我怎样才能使它与 vue-tables-2 一起工作? pdfmake table content screenshot
如果有人知道更好的 vue-tables-2 pdf 库,请告诉我。 到目前为止,这是我的代码...
<v-server-table url="/removals" :data="tableData" :columns="columns" :options="options">
<input slot="selected" slot-scope="props" type="checkbox" :checked="props.row.selected" v-model="checkedRows" :value="props.row">
<button slot="afterFilter" type="submit" @click="createPDF">Create PDF</button>
</v-server-table>
我的数据内容现在只是一个非常简单的原型:
data() {
return {
tableData: [],
checkedRows: [],
columns: [
'selected',
'sku',
],
options: {
}
}
还有我的方法...
methods: {
createPDF() {
pdfMake.createPdf(docDefinition).download('PO.pdf');
}
}
您可以使用以下命令安装 pdfmake
:
npm install pdfmake --save-dev
并按如下方式导入和使用它
<template>....</template>
<script>
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;
export default{
data() {
return {
tableData: [],
checkedRows: [],
columns: [
'selected',
'sku',
],
options: {
}
},
methods: {
createPDF() {
var docDefinition = {
content: [
{
table: {
headerRows: 1,
widths: [ '*', 'auto', 100, '*' ],
body: []
}
}
]
};
docDefinition.content[0].table.body.push(this.columns);
for(var i=0;i<this.checkedRows.length;i++){
docDefinition.content[0].table.body.push(Object.values(this.checkedRows[i]));
}
pdfMake.createPdf(docDefinition).download('PO.pdf');
}
}
}