Thiết kế website giá rẻ

Question

So I am creating a store to sell digital files, where the user can edit the purchased files, by adding text, lists, images, shapes.. and save these edits
I am using Angular 16 for the frontend and Laravel 11 for the backend.
The problem is that every library I tried gave me errors and I found it difficult to integrate, especially since I am a beginner in Angular, I tried fabricJs, Konva, Pdf-lib, pdf.js
i decided to stick with these 2 libraries; pdf.js for displaying and konva.js for editing, what ever i tried i get the same errors :

Error: node_modules/@napi-rs/canvas/index.d.ts:301:17 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

301 getContent(): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:365:58 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

365 encodeSync(format: ‘webp’ | ‘jpeg’, quality?: number): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:366:30 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

366 encodeSync(format: ‘png’): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:367:49 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

367 encodeSync(format: ‘avif’, cfg?: AvifConfig): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:368:62 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

368 encode(format: ‘webp’ | ‘jpeg’, quality?: number):
Promise
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:369:34 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

369 encode(format: ‘png’): Promise
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:370:53 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

370 encode(format: ‘avif’, cfg?: AvifConfig): Promise
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:372:32 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

372 toBuffer(mime: ‘image/png’): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:373:66 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

373 toBuffer(mime: ‘image/jpeg’ | ‘image/webp’, quality?: number):
Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:374:51 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

374 toBuffer(mime: ‘image/avif’, cfg?: AvifConfig): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:376:11 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

376 data(): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:402:18 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

402 register(font: Buffer, nameAlias?: string): boolean
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:444:43 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

444 export function convertSVGTextToPath(svg: Buffer | string): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:444:61 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

444 export function convertSVGTextToPath(svg: Buffer | string): Buffer
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:449:27 – error TS2307:
Cannot find module ‘http’ or its corresponding type declarations.

449 requestOptions?: import(‘http’).RequestOptions
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:453:26 – error TS2591:
Cannot find name ‘Buffer’. Do you need to install type definitions for
node? Try npm i --save-dev @types/node and then add ‘node’ to the
types field in your tsconfig.

453 source: string | URL | Buffer | ArrayBufferLike | Uint8Array |
Image | import(‘stream’).Readable,
~~~~~~

Error: node_modules/@napi-rs/canvas/index.d.ts:453:81 – error TS7016:
Could not find a declaration file for module ‘stream’.
‘C:/laragon/www/Angular_Laravel/frontend-app/node_modules/stream/index.js’
implicitly has an ‘any’ type. Try npm i --save-dev @types/stream
if it exists or add a new declaration (.d.ts) file containing declare module 'stream';

453 source: string | URL | Buffer | ArrayBufferLike | Uint8Array |
Image | import(‘stream’).Readable,
~~~~~~~~

Error: node_modules/pdfjs-dist/types/src/display/api.d.ts:732:18 –
error TS2315: Type ‘Uint8Array’ is not generic.

732 initialData: Uint8Array | null;
~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error:
node_modules/pdfjs-dist/types/src/display/cmap_reader_factory.d.ts:11:19

error TS2315: Type ‘Uint8Array’ is not generic.

11 cMapData: Uint8Array;
~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error:
node_modules/pdfjs-dist/types/src/display/cmap_reader_factory.d.ts:24:31

error TS2315: Type ‘Uint8Array’ is not generic.

24 _fetch(url: any): Promise<Uint8Array>;
~~~~~~~~~~~~~~~

Error:
node_modules/pdfjs-dist/types/src/display/editor/stamp.d.ts:35:19 –
error TS2315: Type ‘Uint8ClampedArray’ is not generic.

35 data: Uint8ClampedArray;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/pdfjs-dist/types/src/display/node_utils.d.ts:1:46

error TS2315: Type ‘Uint8Array’ is not generic.

1 export function fetchData(url: any):
Promise<Uint8Array>;
~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/pdfjs-dist/types/src/display/node_utils.d.ts:12:31

error TS2315: Type ‘Uint8Array’ is not generic.

12 _fetch(url: any): Promise<Uint8Array>;
~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/pdfjs-dist/types/src/display/node_utils.d.ts:20:31

error TS2315: Type ‘Uint8Array’ is not generic.

20 _fetch(url: any): Promise<Uint8Array>;
~~~~~~~~~~~~~~~~~~~~~~~

Error:
node_modules/pdfjs-dist/types/src/display/standard_fontdata_factory.d.ts:8:17

error TS2315: Type ‘Uint8Array’ is not generic.

8 }): Promise<Uint8Array>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error:
node_modules/pdfjs-dist/types/src/display/standard_fontdata_factory.d.ts:19:31

error TS2315: Type ‘Uint8Array’ is not generic.

19 _fetch(url: any): Promise<Uint8Array>;
~~~~~~~~~~~~~~~

Error: node_modules/pdfjs-dist/types/src/shared/util.d.ts:351:42 –
error TS2315: Type ‘Uint8Array’ is not generic.

351 export function stringToBytes(str: any): Uint8Array;
~~~~~~~~~~~~~~~

my code is basic i didnt do much:

import { Component, ElementRef, AfterViewInit } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer';
@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})

export class EditorComponent implements AfterViewInit {
  constructor(private el: ElementRef) { }

  ngAfterViewInit(): void {
    this.loadPdfViewer();
  }

  loadPdfViewer() {
    const pdfUrl = '/assets/sample.pdf';
    const viewerContainer = this.el.nativeElement.querySelector('#viewerContainer');
    const viewer = new (pdfjsLib as any).PDFViewer({
      container: viewerContainer,
    });

    pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;

    const loadingTask = pdfjsLib.getDocument(pdfUrl);
    loadingTask.promise.then((pdfDocument: any) => {
      viewer.setDocument(pdfDocument);
    });
  }
}

can anyone tell me how to solve this problem?
ps: i already tried adding,
“types”: [
“node”
] to my tsconfig.json file

Thiết kế website giá rẻ

Danh mục

PDF.js isnt working with my Angular 1 6 frontend app [closed]