Breaking News: Grepper is joining You.com. Read the official announcement!

TypeScript/JS code to PREVIEW & DOWNLOAD pdf's/documents

Jay Lee answered on July 19, 2022 Popularity 9/10 Helpfulness 3/10

answer TypeScript/JS code to PREVIEW & DOWNLOAD pdf's/documents

TypeScript/JS code to PREVIEW & DOWNLOAD pdf's/documents

Comment

// a SERVICE
downloadManual(manualID: number): Observable<Manual> {
    return this.webConveyClient.downloadManual(manualID).pipe(
        map((data) => {
          if (data) {
            return data;
          }
        }),
    );
  }
  
  // componet code to PREVIEW
  else {
      this.service.downloadManual(this.selected[0].manualID).subscribe(
          (result) => {
            const data = this.base64ToArrayBuffer(result.data);
            const url = window.URL.createObjectURL(
                new Blob([data], {
                  type: 'application/pdf',
                }),
            );
            window.open(url, '_blank');
          },
          () => {},
          () => (this.isLoading = false),
      );
    }


// { // componet code to DOWNLOAD
       this.service.downloadManual(this.selected[0].manualID).subscribe(
          (result) => {
            const byteArray = this.base64ToArrayBuffer(result.data);
            const blob: any = new Blob([byteArray], {
              type: 'application/octet-stream',
            });
            saveAs(blob, this.selected[0].fileName, true);
          },
          () => {},
          () => (this.isLoading = false),
      );
    }
    
// IMPORTANT: a Code to convert file to BLOB (file conversion)
    public base64ToArrayBuffer(base64: any): ArrayBuffer {
    const binaryString = window.atob(base64);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
  }

// NB: Can also add SWAL (Sweetalert2 Module) to check if a pdf/doc is selected
if (this.selected === null || this.selected.length != 1) {
      Swal.fire({
        title: 'Info',
        icon: 'info',
        text: 'Please select at least one manual to preview',
        showClass: {
          popup: 'animate__animated animate__fadeInDown',
        },
        hideClass: {
          popup: 'animate__animated animate__fadeOutUp',
        },
      });
    }

Popularity 9/10 Helpfulness 3/10 Language typescript

Source: Grepper

Tags: angular document download preview typescript

Link to this answer
Share Copy Link

Contributed on Jul 19 2022

Jay Lee

0 Answers Avg Quality 2/10

TypeScript/JS code to PREVIEW & DOWNLOAD pdf's/documents

Contents

More Related Answers

TypeScript/JS code to PREVIEW & DOWNLOAD pdf's/documents

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.