Search code examples
javascripthtmlpdfmodal-dialogsweetalert2

Is there a way to put a Pdf inside a Swal modal?


I'am making a button to when te user click, open up a Swal... the thing is, how can I put a Pdf view inside that swal modal, without send the user to another page?

It's possible to do that using the Sweet Alert library? How can I do that?


Solution

  • You can add some html code inside SweetAlert.

    Swal.fire({
      title: '<strong>HTML <u>example</u></strong>',
      icon: 'info',
      html:
        'You can use <b>bold text</b>, ' +
        '<a href="//sweetalert2.github.io">links</a> ' +
        'and other HTML tags',
      showCloseButton: true,
      showCancelButton: true,
      focusConfirm: false,
      confirmButtonText:
        '<i class="fa fa-thumbs-up"></i> Great!',
      confirmButtonAriaLabel: 'Thumbs up, great!',
      cancelButtonText:
        '<i class="fa fa-thumbs-down"></i>',
      cancelButtonAriaLabel: 'Thumbs down'
    })
    

    And then try to add your pdf with embed, for exemple:

    <embed src="files/Brochure.pdf" type="application/pdf" width="100%" height="600px" />
    

    References:

    https://sweetalert2.github.io/

    https://www.codexworld.com/embed-pdf-document-file-in-html-web-page/