Comments (5)
@jnunez2301 everything is working fine. What exactly is your issue?
Tested it out yesterday functions work fine for older versions of jspdf, xlxs, jspdf-autotable and file-saver;
The problem is related to Typescript types i had to add a bunch of @ts-expect-error comments to make it work fine
// Datatable is not acepted as a useRef<DataTable> like shown on the post but i don't mind just not adding its type it works fine
const dt = useRef(null);
// Don't mind this its just a workaround for a custom table component i made to gather cols info
const cols = Object.entries(propFilters).map(d => {
return {
field: d[0],
header: !d[1].customHeader ? d[0].toUpperCase() : d[1].customHeader
}
});
const exportColumns = cols.map((col) => ({ title: col.header, dataKey: col.field }));
// @ts-expect-error: Which type should i provide to this? any? unknown?
const exportCSV = (selectionOnly) => {
// @ts-expect-error: This will never be null so don't mind TS errors
dt.current.exportCSV({ selectionOnly });
};
// -- Here is where everything goes wrong --
const exportPdf = () => {
import("jspdf").then((jsPDF) => {
import("jspdf-autotable").then(() => {
// @ts-expect-error: It's assignable its just a compilation error
const doc = new jsPDF.default(0, 0);
// @ts-expect-error: Property autoTable does exist on "file-saver": "^2.0.5" But its shown as depracated
// "jspdf": "^2.5.1",
// "jspdf-autotable": "^3.8.2",
doc.autoTable(exportColumns, data);
doc.save(`${Date.now()}.pdf`);
});
});
};
const exportExcel = () => {
import("xlsx").then((xlsx) => {
const worksheet = xlsx.utils.json_to_sheet(data);
const workbook = { Sheets: { data: worksheet }, SheetNames: ["data"] };
const excelBuffer = xlsx.write(workbook, {
bookType: "xlsx",
type: "array",
});
saveAsExcelFile(excelBuffer, `${Date.now()}.pdf`);
});
};
// @ts-expect-error: Any is expected to be the type on this function
const saveAsExcelFile = (buffer, fileName) => {
// @ts-expect-error: even if file-saver dependency is installed it still gives an error of not being found on node_modules (tried reinstalling)
import("file-saver").then((module) => {
if (module && module.default) {
const EXCEL_TYPE =
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
const EXCEL_EXTENSION = ".xlsx";
const data = new Blob([buffer], {
type: EXCEL_TYPE,
});
module.default.saveAs(
data,
fileName + "_export_" + new Date().getTime() + EXCEL_EXTENSION
);
}
});
};
So everything is fine as you say i think we just might need an advice for the Typescript version regargindg those TS errors.
from primereact.
Thanks for following up. I am sure this will get updated someday but currently the PR showcase uses JS not TS which is why they aren't seeing any issues. Thanks for the code snippets!
from primereact.
I don't understand it looks like its still supports autoTable
see: https://github.com/JonatanPe/jsPDF-AutoTable
from primereact.
Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.
from primereact.
@jnunez2301 everything is working fine. What exactly is your issue?
from primereact.
Related Issues (20)
- Dropdown: Simple primitive values showing empty items HOT 1
- DataTable: Column Reorder Indicator Incorrect
- Calendar: Prop typings are not working correctly HOT 5
- InputNumber: number formatting does not update when locale is set through PrimeReactContext HOT 1
- IconField: Reference error React is not defined, im using vite HOT 4
- Dropdown: Init-Value not working if options have label,value properties HOT 8
- DataTable: Reordering Columns Causes Duplication in Checkbox Column and Reorder Row Indicator Column HOT 1
- Dropdown: No longer shows options with simple primitive values HOT 1
- InputOtp: Setting Value does not clear display
- Password > Icon and Input render order > tabIndex issue HOT 1
- Typo error on the Theming page HOT 1
- DataTable: re-order + resizable fails HOT 2
- Typo error on `PrimeFlex` section of the Theming documentation HOT 1
- Readme typo HOT 1
- Sidebar: Headless Sidebar is hidden in Small and Medium-Sized Views HOT 1
- PanelMenu MenuItem Id Prop Not Passed
- DataTable: Row groups are duplicated when the groupRowsBy value is changed
- onSort return only one value on every event HOT 2
- MeterGroup: Percentages always based on max 100 HOT 3
- DataTable Dropdown Filter: Value is not getting updated upon selection HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from primereact.