Как я могу загрузить PDF вручную из ngx-extended-pdf-viewer в angular 13

Я установил ngx-extended-pdf-viewer@18 и angular 13. Все работает хорошо. Но теперь я хочу загрузить редактируемый PDF-файл отдельной кнопкой, как мне этого добиться. пожалуйста помоги

в HTML-файле

<ngx-extended-pdf-viewer #pdfViewer [src] = "pdfSrc" [contextMenuAllowed] = "false"
                         [enablePrint] = "false"
                         [showSidebarButton] = "false"
                         [showOpenFileButton] = "false"
                         [showSecondaryToolbarButton] = "false"
                         height = "80vh"></ngx-extended-pdf-viewer>

<button (click) = "downloadPdf()">Download it</button>

в ts-файле

import {Component, ElementRef, OnInit, ViewChild, NgZone} from '@angular/core';
import SignaturePad from 'signature_pad';
import {PDFDocumentProxy} from 'ng2-pdf-viewer';
import {PDFDocument} from 'pdf-lib';
import {HttpClient} from "@angular/common/http";
import {IPDFViewerApplication, NgxExtendedPdfViewerComponent, PdfDownloadedEvent} from "ngx-extended-pdf-viewer";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  // pdf document
  pdfSrc = '../assets/download.pdf';
  pdfDoc?: PDFDocumentProxy;
  pdfDownloaded: any;
  @ViewChild('pdfViewer') pdfViewer!: NgxExtendedPdfViewerComponent;
  
constructor(private http: HttpClient, private ngZone: NgZone) {
  }
 
  ngOnInit(): void {
    console.info('dfsd');
  }


  downloadPdf() {
    // Get the PDF data from the PDF viewer
    // @ts-ignore
    const editedPdfData = this.pdfViewer?.getCurrentDocumentAsBlob();

    // Create a Blob URL for the edited PDF data
    const blob = new Blob([editedPdfData], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);

    // Create a download link
    const link = document.createElement('a');
    link.href = url;
    link.download = 'edited-file.pdf'; // Specify the desired filename

    // Append the link to the document, trigger the download, and then remove the link
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // Revoke the Blob URL to free up memory
    URL.revokeObjectURL(url);
  }
}

не только это, я сделал так много попыток решить эту проблему, но так и не нашел решения.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
242
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это решение возможно только для версий, равных или выше версии 7.

Добавить импорт

import { NgxExtendedPdfViewerService } from 'ngx-extended-pdf-viewer';

измените свой код здесь:

constructor( private http: HttpClient, private ngZone: NgZone, private ngxService: NgxExtendedPdfViewerService) { }

и здесь:

const editedPdfData = this.ngxService?.getCurrentDocumentAsBlob();

Можете ли вы использовать правильный формат и синтаксис кода?

Cristea 25.05.2024 18:58

Спасибо за Вашу поддержку. Я уже исправил это так же, как вы упомянули.

Ramesh Bhandari 26.05.2024 13:39

Эта функция доступна начиная с версии 7. В предыдущих версиях скачать файл можно было только с панели инструментов, загрузите файл. Если вам нужно, чтобы он был совместим с ie11. единственная версия, которая работает на 100%, использует версию «ngx-extended-pdf-viewer»: «5.3»,

usdspain 27.05.2024 09:20

Другие вопросы по теме