Pdf Export not working
I try to export my datagrid to pdf but when I click on pdf export button I get the following error in console:
Uncaught (in promise) PdfDocument {isStreamCopied: false, defaultMargin: 40, streamWriter: null, document: PdfDocument, objects: PdfMainObjectCollection, …}
The code is below
<template>
<div id="app" style="height: 700px">
<ejs-grid
ref="grid"
id="Grid"
:allowFiltering="true"
:filterSettings="filterOptions"
height="100%"
width="100%"
:actionBegin="actionBegin"
:allowSorting="true"
:allowGrouping="true"
:allowPaging="true"
:pageSettings="pageSettings"
:toolbar="toolbarOptions"
:toolbarClick="toolbarClick"
:allowPdfExport="true"
:allowExcelExport="true"
:headerCellInfo="headerCellInfoEvent"
>
<e-columns>
<e-column
field="employeenumber"
headerText="Табельный"
width="200"
></e-column>
<e-column field="fullname" headerText="ФИО" width="200"></e-column>
<e-column
field="efftitle.name"
headerText="Должность"
width="200"
></e-column>
<e-column
field="effdepartment.block.name"
:filter="filter"
headerText="Блок"
width="200"
></e-column>
<e-column
field="effdepartment.subblock.name"
:filter="filter"
headerText="Подблок"
width="200"
></e-column>
<e-column
field="effdepartment.parent.name"
:filter="filter"
headerText="Департамент"
width="200"
></e-column>
<e-column
field="effdepartment.name"
:filter="filter"
headerText="Управление"
width="200"
></e-column>
<e-column
field="date"
headerText="Дата"
format="yMd"
type="date"
width="200"
:filter="filterdate"
></e-column>
<e-column
field="entry_time"
headerText="Вход в ПК"
width="200"
></e-column>
<e-column
field="exit_time"
headerText="Выход из ПК"
width="200"
></e-column>
<e-column
field="active_time"
headerText="Активное время"
width="200"
></e-column>
<e-column
field="not_active_time"
headerText="Неактивное время"
width="200"
></e-column>
<e-column
field="actual_time"
headerText="Фактическая продолжительность"
width="200"
></e-column>
<e-column
field="productive_time"
headerText="Продуктивное время"
width="200"
></e-column>
<e-column
field="entry_time_night"
headerText="Вход в ПК ночью"
width="200"
></e-column>
<e-column
field="exit_time_night"
headerText="Выход из ПК ночью"
width="200"
></e-column>
<e-column
field="active_time_night"
headerText="Активное время взаимодействия с ПК ночью"
width="200"
></e-column>
<e-column
field="total_time"
headerText="Общая продолжительность"
width="200"
></e-column>
<e-column
field="scheduled_entry_time"
headerText="Время входа по графику"
width="200"
></e-column>
<e-column
field="scheduled_exit_time"
headerText="Время выхода по графику"
width="200"
></e-column>
<e-column
field="is_late_entry"
headerText="Опоздание"
width="200"
></e-column>
<e-column
field="is_early_exit"
headerText="Ранний уход"
width="200"
></e-column>
<e-column
field="overtime_amount"
headerText="Переработка"
width="200"
></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import {
GridPlugin,
Filter,
Sort,
Group,
Page,
PdfExport,
Toolbar,
ExcelExport,
PdfExportProperties,
} from "@syncfusion/ej2-vue-grids";
import { loadCldr, setCulture, L10n } from "@syncfusion/ej2-base";
import {
DateRangePicker,
DateRangePickerPlugin,
} from "@syncfusion/ej2-vue-calendars";
import { createElement } from "@syncfusion/ej2-base";
import { Tooltip } from "@syncfusion/ej2-popups";
import axios from "axios";
loadCldr(
require("cldr-data/main/ru-KZ/ca-gregorian.json"),
require("cldr-data/main/ru-KZ/numbers.json"),
require("cldr-data/main/ru-KZ/timeZoneNames.json"),
require("cldr-data/supplemental/numberingSystems.json")
);
var _ = require("lodash");
L10n.load({
"ru-KZ": {
grid: {
EmptyRecord: "Нет данных",
GroupDropArea: "Перетащите колонку на это поле для группировки",
StartsWith: "Начинается на",
EndsWith: "Заканчивается на",
Contains: "Содержит",
Equal: "Равно",
NotEqual: "Не равно",
EnterValue: "Введите значение",
FilterButton: "Фильтровать",
ClearButton: "Очистить",
SelectAll: "Выбрать все",
Search: "Искать",
Item: "запись",
Items: "записи",
pagerDropDown: "записей на странице",
pagerAllDropDown: "записей",
Pdfexport: "Экспорт в PDF",
Excelexport: "Экспорт в Excel",
All: "Все",
},
pager: {
currentPageInfo: "{0} из {1} страниц",
totalItemsInfo: "({0} записей)",
pagerDropDown: "записей на страницу",
All: "Все",
},
},
});
Vue.use(GridPlugin);
Vue.use(DateRangePickerPlugin);
export default {
data() {
let vm = this;
return {
toolbarOptions: ["PdfExport", "ExcelExport"],
pageSettings: { pageSizes: true, pageSize: 20 },
filterOptions: {
type: "Menu",
},
filter: {
type: "CheckBox",
},
filterdate: {
ui: {
create: function (args) {
args.getOptrInstance.dropOptr.element.parentElement.parentElement.style.display =
"none";
var isFiltered = event.target.classList.contains("e-filtered");
vm.dateRangeInstance = new DateRangePicker({
placeholder: "Выберите дату",
value: isFiltered ? vm.dateValue : null,
change: function (e) {
if (e.value) {
vm.dateValue = e.value;
vm.$refs.grid.filterByColumn(
"date",
"greaterthanorequal",
vm.dateValue[0]
);
} else {
vm.$refs.grid.filterSettings.columns = [];
vm.$refs.grid.removeFilteredColsByField(args.target.id);
}
},
});
let flValInput = createElement("input", { className: "flm-input" });
args.target.appendChild(flValInput);
vm.dateRangeInstance.appendTo(flValInput);
},
write: function (args) {
console.log("filterval:" + args.filteredValue);
},
read: function (args) {
console.log(vm.dateRangeInstance.startVal);
},
},
},
};
},
mounted() {
setCulture("ru-KZ");
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; // Grid instance
const fetchNames = async () => {
try {
const res = await Promise.all([
axios.get("http://dact1a003/employee/", {
withCredentials: true,
}),
axios.get("http://dact1a003/activity/", {
withCredentials: true,
}),
]);
const data = res.map((res) => res.data.result);
let mergedList = _.map(data[1], function (item) {
return _.extend(item, _.find(data[0], { id: item.employee }));
});
let result = JSON.stringify(mergedList);
result = JSON.parse(result);
result.forEach((res) => {
// res["employeenumber"] = res["employeenumber"].toString()
for (let key in res) {
if (key == "date") {
res[key] = new Date(res[key]);
}
}
});
grid.dataSource = result;
} catch {
throw Error("Promise failed");
}
};
fetchNames();
},
methods: {
toolbarClick(args) {
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
if (args.item.id === "Grid_pdfexport") {
this.$refs.grid.pdfExport();
}
if (args.item.id === "Grid_excelexport") {
this.$refs.grid.excelExport();
}
},
headerCellInfoEvent: function (args) {
new Tooltip(
{
content: args.cell.column.headerText,
},
args.node
);
},
actionBegin: function (args) {
// Check for filter column
if (
args.requestType === "filtering" &&
args.currentFilteringColumn === "date"
) {
// End date value is added as additional filter value with ‘lessthan’ filter operator
args.columns.push({
actualFilterValue: {},
actualOperator: {},
field: "date",
ignoreAccent: false,
isForeignKey: false,
matchCase: false,
operator: "lessthanorequal",
predicate: "and",
uid: this.$refs.grid.getColumnByField(
args.currentFilteringColumn
).uid,
value: new Date(
new Date(this.dateValue[1]).getTime() + 60 * 60 * 24 * 1000
),
});
}
},
},
provide: {
grid: [Filter, Sort, Group, Page, Toolbar, PdfExport, ExcelExport],
},
};
</script>
<style scoped>
@import "../../node_modules/@syncfusion/ej2-base/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-calendars/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-vue-grids/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-icons/styles/bootstrap4.css";
@import "../../node_modules/@syncfusion/ej2-grids/styles/bootstrap4.css";
</style>
SIGN IN To post a reply.
1 Reply
KM
Kuralarasan Muthusamy
Syncfusion Team
October 29, 2021 03:33 PM UTC
Hi Timor,
Greetings from Syncfusion support.
Based on the query we would like to let you know that the pdf export only supports the following fonts by default,
- Helvetica
- TimesRoman
- Courier
- Symbol
- ZapfDingbats
And as these default fonts do not support the languages that you have mentioned, you need to use TrueTypeFont instead of StandardFont to export pdf document with these language characters from the Grid. Please refer the below documentation for more details on this,
Documentation: https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/#add-custom-font-for-pdf-exporting
As you can see in the above documentation, the TrueTypeFont is assigned to the theme properties - header, caption and record of the pdf exportProperties by passing the base64 format of the custom font that supports these language characters to it. You can set any custom font’s base64 format string that supports the required language characters here. The pdf export properties are then passed along with the Grid’s pdfExport method.
This is demonstrated in the below code snippet for your reference,
|
import { GridPlugin, Filter, Sort, Group, Page, PdfExport, Toolbar, ExcelExport, PdfExportProperties } from '@syncfusion/ej2-grids';
import { data,base64 } from './datasource'; // import your custom font
import { loadCldr, setCulture, L10n } from "@syncfusion/ej2-base";
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
import { DateRangePicker, DateRangePickerPlugin } from "@syncfusion/ej2-vue-calendars";
import { createElement } from "@syncfusion/ej2-base";
import { Tooltip } from "@syncfusion/ej2-popups";
import axios from "axios";
toolbarClick(args: Object) {
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
if (args.item.id === "Grid_pdfexport") {
let pdfExportProperties: PdfExportProperties = {
theme: {
header: {font: new PdfTrueTypeFont(base64, 12) }, // here you can bind your custom fonts
caption: { font: new PdfTrueTypeFont(base64, 10) },
record: { font: new PdfTrueTypeFont(base64, 9) }
}
};
this.$refs.grid.pdfExport(pdfExportProperties);
}
if (args.item.id === "Grid_excelexport") {
this.$refs.grid.excelExport()
}
} |
We have demonstrated this case in the below sample for your reference.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue_pdf_Export2030230793.zip
Please get back to us if you require any further assistance.
Regards,
Kuralarasan M
SIGN IN To post a reply.
