Giter VIP home page Giter VIP logo

Comments (5)

jnunez2301 avatar jnunez2301 commented on May 31, 2024 1

@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.

melloware avatar melloware commented on May 31, 2024 1

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.

melloware avatar melloware commented on May 31, 2024

I don't understand it looks like its still supports autoTable see: https://github.com/JonatanPe/jsPDF-AutoTable

from primereact.

github-actions avatar github-actions commented on May 31, 2024

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.

melloware avatar melloware commented on May 31, 2024

@jnunez2301 everything is working fine. What exactly is your issue?

from primereact.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.