vxe-table-plugin-export-pdf
На основе vxe-table, табличного плагина, поддерживающего экспорт в формате pdf, реализованного на основе jspdf.
Совместимость
Соответствует версии v4 vxe-table.
Установка
npm install vxe-table@next vxe-table-plugin-export-pdf@next jspdf
// ...
import VXETable from 'vxe-table'
import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
import { jsPDF } from 'jspdf'
// ...
// Способ 1: NPM установка, внедрение объекта jspDF
VXETable.use(VXETablePluginExportPDF, {
jsPDF
})
// Способ 2: Установка через CDN, достаточно убедиться, что window.jsPDF существует
// VXETable.use(VXETablePluginExportPDF)
Опции
Свойство | Тип | Описание | Значение по умолчанию |
---|---|---|---|
fontName | String | Устанавливает шрифт по умолчанию | — |
fonts | Array<{fontName, fontUrl}> | Конфигурация сопоставления шрифтов | — |
beforeMethod | Function({ $pdf, options, columns, datas }) | Вызов обратного вызова перед экспортом, можно самостоятельно настроить стиль шрифта и т. д. | — |
Шрифт Здесь используется открытый исходный код Source Han Sans TTF.
Шрифт | Имя файла |
---|---|
SourceHanSans-ExtraLight | source-han-sans-extralight.js |
SourceHanSans-Light | source-han-sans-light.js |
SourceHanSans-Normal | source-han-sans-normal.js |
SourceHanSans-Regular | source-han-sans-regular.js |
SourceHanSans-Medium | source-han-sans-medium.js |
SourceHanSans-Bold | source-han-sans-bold.js |
SourceHanSans-Heavy | source-han-sans-heavy.js |
Демо
<vxe-toolbar>
<template v-slot:buttons>
<vxe-button @click="exportEvent">MyExport.pdf</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
ref="xTable"
height="600"
:data="tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
</vxe-table>
export default {
data () {
return {
tableData: [
{ id: 100, name: 'test', age: 26, date: null },
{ id: 101, name: 'test1', age: 30, date: null },
{ id: 102, name: 'test2', age: 34, date: null }
]
}
},
methods: {
exportEvent() {
this.$refs.xTable.exportData({
// fontName: 'SourceHanSans-Normal', // Установить шрифт, по умолчанию первый
filename: 'MyExport',
type: 'pdf'
})
}
}
}
Лицензия MIT © 2019-present, Xu Liangzhan
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )