how to convert html to pdf in modal with Jquery?

I have a task to do where i have to show pdf in bootstrap modal with out the download option.That pdf would have input fields where user can upload its signature and when user would click okay it would save respective pdf with filled information. I tried to do so,with Bootstrap modal i am able to show the form with input options in modal pop up, but i want whatever i write in modal,it should show up as pdf and that to with out doanload option.

I am searching answer in Jquery,i saw jsPDF but all tutorials show how to download html2pdf.I just want to show user to read it first not download.

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        <div style="text-align: center;" class="test">

            <div>

                <hr><h2>Contract</h2><hr>

                <h3>Hereby,i buy LaLaLa Land in the exchange of 2 cookies.</h3>

            </div>



            <div class="signature">

                <hr><h2>Signature Page</h2><hr>



                    <img class="profile-pic" />

                    <div class="upload-button"></div>

                    <input class="file-upload" type="file" accept="image/*"/>



                <h4>Document ID:dlfkhahdf4565n5jbnjk45h</h4>

                <h4>User Name:Donald Trump</h4>

                <h4>User ID:456jkn45</h4>

            </div>

</div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

        <button type="button" class="btn btn-primary">Okay</button>

      </div>

    </div>

  </div>

</div>

edited Nov 18 '18 at 10:19

asked Nov 18 '18 at 10:11

Chidananda Nayak

361112

1

why vote down! you can explain instead of just voting down!

– Chidananda Nayak
Nov 18 '18 at 10:16

1

I don't see what the problem is with this question. It's specific and answerable; apart from a few typos, it's alright.

– wizzwizz4
Nov 18 '18 at 10:20

add a comment |

I am searching answer in Jquery,i saw jsPDF but all tutorials show how to download html2pdf.I just want to show user to read it first not download.

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        <div style="text-align: center;" class="test">

            <div>

                <hr><h2>Contract</h2><hr>

                <h3>Hereby,i buy LaLaLa Land in the exchange of 2 cookies.</h3>

            </div>



            <div class="signature">

                <hr><h2>Signature Page</h2><hr>



                    <img class="profile-pic" />

                    <div class="upload-button"></div>

                    <input class="file-upload" type="file" accept="image/*"/>



                <h4>Document ID:dlfkhahdf4565n5jbnjk45h</h4>

                <h4>User Name:Donald Trump</h4>

                <h4>User ID:456jkn45</h4>

            </div>

</div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

        <button type="button" class="btn btn-primary">Okay</button>

      </div>

    </div>

  </div>

</div>

edited Nov 18 '18 at 10:19

asked Nov 18 '18 at 10:11

Chidananda Nayak

361112

1

why vote down! you can explain instead of just voting down!

– Chidananda Nayak
Nov 18 '18 at 10:16

1

I don't see what the problem is with this question. It's specific and answerable; apart from a few typos, it's alright.

– wizzwizz4
Nov 18 '18 at 10:20

add a comment |

I am searching answer in Jquery,i saw jsPDF but all tutorials show how to download html2pdf.I just want to show user to read it first not download.

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        <div style="text-align: center;" class="test">

            <div>

                <hr><h2>Contract</h2><hr>

                <h3>Hereby,i buy LaLaLa Land in the exchange of 2 cookies.</h3>

            </div>



            <div class="signature">

                <hr><h2>Signature Page</h2><hr>



                    <img class="profile-pic" />

                    <div class="upload-button"></div>

                    <input class="file-upload" type="file" accept="image/*"/>



                <h4>Document ID:dlfkhahdf4565n5jbnjk45h</h4>

                <h4>User Name:Donald Trump</h4>

                <h4>User ID:456jkn45</h4>

            </div>

</div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

        <button type="button" class="btn btn-primary">Okay</button>

      </div>

    </div>

  </div>

</div>

edited Nov 18 '18 at 10:19

asked Nov 18 '18 at 10:11

Chidananda Nayak

361112

I am searching answer in Jquery,i saw jsPDF but all tutorials show how to download html2pdf.I just want to show user to read it first not download.

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        <div style="text-align: center;" class="test">

            <div>

                <hr><h2>Contract</h2><hr>

                <h3>Hereby,i buy LaLaLa Land in the exchange of 2 cookies.</h3>

            </div>



            <div class="signature">

                <hr><h2>Signature Page</h2><hr>



                    <img class="profile-pic" />

                    <div class="upload-button"></div>

                    <input class="file-upload" type="file" accept="image/*"/>



                <h4>Document ID:dlfkhahdf4565n5jbnjk45h</h4>

                <h4>User Name:Donald Trump</h4>

                <h4>User ID:456jkn45</h4>

            </div>

</div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

        <button type="button" class="btn btn-primary">Okay</button>

      </div>

    </div>

  </div>

</div>

javascript jquery bootstrap-modal

edited Nov 18 '18 at 10:19

asked Nov 18 '18 at 10:11

Chidananda Nayak

361112

edited Nov 18 '18 at 10:19

asked Nov 18 '18 at 10:11

Chidananda Nayak

361112

edited Nov 18 '18 at 10:19

asked Nov 18 '18 at 10:11

Chidananda Nayak

361112

asked Nov 18 '18 at 10:11

Chidananda Nayak

361112

asked Nov 18 '18 at 10:11

Chidananda Nayak

361112

1

why vote down! you can explain instead of just voting down!

– Chidananda Nayak
Nov 18 '18 at 10:16

1

I don't see what the problem is with this question. It's specific and answerable; apart from a few typos, it's alright.

– wizzwizz4
Nov 18 '18 at 10:20

add a comment |

1

why vote down! you can explain instead of just voting down!

– Chidananda Nayak
Nov 18 '18 at 10:16

1

I don't see what the problem is with this question. It's specific and answerable; apart from a few typos, it's alright.

– wizzwizz4
Nov 18 '18 at 10:20

why vote down! you can explain instead of just voting down!

– Chidananda Nayak
Nov 18 '18 at 10:16

I don't see what the problem is with this question. It's specific and answerable; apart from a few typos, it's alright.

– wizzwizz4
Nov 18 '18 at 10:20

add a comment |

1 Answer
1

active

oldest

votes

Simply display the data: URI of the created PDF in an iframe, or use PDF.js to show it:

// Set up jsPDF

var pdf = new jsPDF();



// Set up PDF.js

//pdfjsLib.GlobalWorkerOptions.workerSrc =

//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



function render_example() {

  var source = document.getElementById("convert_me_to_pdf");

  pdf.fromHTML(source, function (dispose) {

    var pdf_uri = pdf.output("datauristring");

    document.getElementById("show_pdf_here").src = pdf_uri;



    var pdf_array = pdf.output("arraybuffer");

    // PDF.js here!

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>



<button onclick="render_example()">Render</button>



<h1>Output</h1>

<h2><code>&lt;iframe&gt;</code></h2>

<iframe id="show_pdf_here" src="//www.example.org"></iframe>

<h2>PDF.js</h2>

Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.

<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>



<h1>Input</h1>

<div id="convert_me_to_pdf">

  <p>

    Example...

  </p>

  <textarea></textarea>

</div>

Erm... This should work... I don't know why it doesn't. I'm posting it anyway in case it helps.

edited Nov 18 '18 at 11:50

answered Nov 18 '18 at 11:21

wizzwizz4

3,52511635

so, that render should download the pdf or just show the pdf in the browser.

– Chidananda Nayak
Nov 18 '18 at 11:47

@ChidanandaNayak It should show it in the browser. Basically, instead of using pdf.save, use pdf.output("datauristring") and then set the src of an iframe to that.

– wizzwizz4
Nov 18 '18 at 11:48

so here document.getElementById("show_pdf_here").src = pdf_uri; instead of show_pdf_here i should give my modal class or id?

– Chidananda Nayak
Nov 18 '18 at 12:35

@ChidanandaNayak If the modal is an <iframe> that you want to display the PDF in, yes. But this example doesn't actually work; use your mostly-working-but-downloads-instead-of-shows version instead.

– wizzwizz4
Nov 18 '18 at 12:36

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53359753%2fhow-to-convert-html-to-pdf-in-modal-with-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Simply display the data: URI of the created PDF in an iframe, or use PDF.js to show it:

// Set up jsPDF

var pdf = new jsPDF();



// Set up PDF.js

//pdfjsLib.GlobalWorkerOptions.workerSrc =

//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



function render_example() {

  var source = document.getElementById("convert_me_to_pdf");

  pdf.fromHTML(source, function (dispose) {

    var pdf_uri = pdf.output("datauristring");

    document.getElementById("show_pdf_here").src = pdf_uri;



    var pdf_array = pdf.output("arraybuffer");

    // PDF.js here!

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>



<button onclick="render_example()">Render</button>



<h1>Output</h1>

<h2><code>&lt;iframe&gt;</code></h2>

<iframe id="show_pdf_here" src="//www.example.org"></iframe>

<h2>PDF.js</h2>

Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.

<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>



<h1>Input</h1>

<div id="convert_me_to_pdf">

  <p>

    Example...

  </p>

  <textarea></textarea>

</div>

Erm... This should work... I don't know why it doesn't. I'm posting it anyway in case it helps.

edited Nov 18 '18 at 11:50

answered Nov 18 '18 at 11:21

wizzwizz4

3,52511635

so, that render should download the pdf or just show the pdf in the browser.

– Chidananda Nayak
Nov 18 '18 at 11:47

@ChidanandaNayak It should show it in the browser. Basically, instead of using pdf.save, use pdf.output("datauristring") and then set the src of an iframe to that.

– wizzwizz4
Nov 18 '18 at 11:48

so here document.getElementById("show_pdf_here").src = pdf_uri; instead of show_pdf_here i should give my modal class or id?

– Chidananda Nayak
Nov 18 '18 at 12:35

@ChidanandaNayak If the modal is an <iframe> that you want to display the PDF in, yes. But this example doesn't actually work; use your mostly-working-but-downloads-instead-of-shows version instead.

– wizzwizz4
Nov 18 '18 at 12:36

add a comment |

Simply display the data: URI of the created PDF in an iframe, or use PDF.js to show it:

// Set up jsPDF

var pdf = new jsPDF();



// Set up PDF.js

//pdfjsLib.GlobalWorkerOptions.workerSrc =

//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



function render_example() {

  var source = document.getElementById("convert_me_to_pdf");

  pdf.fromHTML(source, function (dispose) {

    var pdf_uri = pdf.output("datauristring");

    document.getElementById("show_pdf_here").src = pdf_uri;



    var pdf_array = pdf.output("arraybuffer");

    // PDF.js here!

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>



<button onclick="render_example()">Render</button>



<h1>Output</h1>

<h2><code>&lt;iframe&gt;</code></h2>

<iframe id="show_pdf_here" src="//www.example.org"></iframe>

<h2>PDF.js</h2>

Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.

<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>



<h1>Input</h1>

<div id="convert_me_to_pdf">

  <p>

    Example...

  </p>

  <textarea></textarea>

</div>

Erm... This should work... I don't know why it doesn't. I'm posting it anyway in case it helps.

edited Nov 18 '18 at 11:50

answered Nov 18 '18 at 11:21

wizzwizz4

3,52511635

so, that render should download the pdf or just show the pdf in the browser.

– Chidananda Nayak
Nov 18 '18 at 11:47

@ChidanandaNayak It should show it in the browser. Basically, instead of using pdf.save, use pdf.output("datauristring") and then set the src of an iframe to that.

– wizzwizz4
Nov 18 '18 at 11:48

so here document.getElementById("show_pdf_here").src = pdf_uri; instead of show_pdf_here i should give my modal class or id?

– Chidananda Nayak
Nov 18 '18 at 12:35

@ChidanandaNayak If the modal is an <iframe> that you want to display the PDF in, yes. But this example doesn't actually work; use your mostly-working-but-downloads-instead-of-shows version instead.

– wizzwizz4
Nov 18 '18 at 12:36

add a comment |

Simply display the data: URI of the created PDF in an iframe, or use PDF.js to show it:

// Set up jsPDF

var pdf = new jsPDF();



// Set up PDF.js

//pdfjsLib.GlobalWorkerOptions.workerSrc =

//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



function render_example() {

  var source = document.getElementById("convert_me_to_pdf");

  pdf.fromHTML(source, function (dispose) {

    var pdf_uri = pdf.output("datauristring");

    document.getElementById("show_pdf_here").src = pdf_uri;



    var pdf_array = pdf.output("arraybuffer");

    // PDF.js here!

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>



<button onclick="render_example()">Render</button>



<h1>Output</h1>

<h2><code>&lt;iframe&gt;</code></h2>

<iframe id="show_pdf_here" src="//www.example.org"></iframe>

<h2>PDF.js</h2>

Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.

<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>



<h1>Input</h1>

<div id="convert_me_to_pdf">

  <p>

    Example...

  </p>

  <textarea></textarea>

</div>

Erm... This should work... I don't know why it doesn't. I'm posting it anyway in case it helps.

edited Nov 18 '18 at 11:50

answered Nov 18 '18 at 11:21

wizzwizz4

3,52511635

Simply display the data: URI of the created PDF in an iframe, or use PDF.js to show it:

// Set up jsPDF

var pdf = new jsPDF();



// Set up PDF.js

//pdfjsLib.GlobalWorkerOptions.workerSrc =

//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



function render_example() {

  var source = document.getElementById("convert_me_to_pdf");

  pdf.fromHTML(source, function (dispose) {

    var pdf_uri = pdf.output("datauristring");

    document.getElementById("show_pdf_here").src = pdf_uri;



    var pdf_array = pdf.output("arraybuffer");

    // PDF.js here!

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>



<button onclick="render_example()">Render</button>



<h1>Output</h1>

<h2><code>&lt;iframe&gt;</code></h2>

<iframe id="show_pdf_here" src="//www.example.org"></iframe>

<h2>PDF.js</h2>

Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.

<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>



<h1>Input</h1>

<div id="convert_me_to_pdf">

  <p>

    Example...

  </p>

  <textarea></textarea>

</div>

Erm... This should work... I don't know why it doesn't. I'm posting it anyway in case it helps.

// Set up jsPDF

var pdf = new jsPDF();



// Set up PDF.js

//pdfjsLib.GlobalWorkerOptions.workerSrc =

//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



function render_example() {

  var source = document.getElementById("convert_me_to_pdf");

  pdf.fromHTML(source, function (dispose) {

    var pdf_uri = pdf.output("datauristring");

    document.getElementById("show_pdf_here").src = pdf_uri;



    var pdf_array = pdf.output("arraybuffer");

    // PDF.js here!

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>



<button onclick="render_example()">Render</button>



<h1>Output</h1>

<h2><code>&lt;iframe&gt;</code></h2>

<iframe id="show_pdf_here" src="//www.example.org"></iframe>

<h2>PDF.js</h2>

Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.

<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>



<h1>Input</h1>

<div id="convert_me_to_pdf">

  <p>

    Example...

  </p>

  <textarea></textarea>

</div>

// Set up jsPDF

var pdf = new jsPDF();



// Set up PDF.js

//pdfjsLib.GlobalWorkerOptions.workerSrc =

//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';



function render_example() {

  var source = document.getElementById("convert_me_to_pdf");

  pdf.fromHTML(source, function (dispose) {

    var pdf_uri = pdf.output("datauristring");

    document.getElementById("show_pdf_here").src = pdf_uri;



    var pdf_array = pdf.output("arraybuffer");

    // PDF.js here!

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>



<button onclick="render_example()">Render</button>



<h1>Output</h1>

<h2><code>&lt;iframe&gt;</code></h2>

<iframe id="show_pdf_here" src="//www.example.org"></iframe>

<h2>PDF.js</h2>

Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.

<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>



<h1>Input</h1>

<div id="convert_me_to_pdf">

  <p>

    Example...

  </p>

  <textarea></textarea>

</div>

edited Nov 18 '18 at 11:50

answered Nov 18 '18 at 11:21

wizzwizz4

3,52511635

edited Nov 18 '18 at 11:50

answered Nov 18 '18 at 11:21

wizzwizz4

3,52511635

answered Nov 18 '18 at 11:21

wizzwizz4

3,52511635

answered Nov 18 '18 at 11:21

wizzwizz4

3,52511635

so, that render should download the pdf or just show the pdf in the browser.

– Chidananda Nayak
Nov 18 '18 at 11:47

@ChidanandaNayak It should show it in the browser. Basically, instead of using pdf.save, use pdf.output("datauristring") and then set the src of an iframe to that.

– wizzwizz4
Nov 18 '18 at 11:48

so here document.getElementById("show_pdf_here").src = pdf_uri; instead of show_pdf_here i should give my modal class or id?

– Chidananda Nayak
Nov 18 '18 at 12:35

@ChidanandaNayak If the modal is an <iframe> that you want to display the PDF in, yes. But this example doesn't actually work; use your mostly-working-but-downloads-instead-of-shows version instead.

– wizzwizz4
Nov 18 '18 at 12:36

add a comment |

so, that render should download the pdf or just show the pdf in the browser.

– Chidananda Nayak
Nov 18 '18 at 11:47

@ChidanandaNayak It should show it in the browser. Basically, instead of using pdf.save, use pdf.output("datauristring") and then set the src of an iframe to that.

– wizzwizz4
Nov 18 '18 at 11:48

so here document.getElementById("show_pdf_here").src = pdf_uri; instead of show_pdf_here i should give my modal class or id?

– Chidananda Nayak
Nov 18 '18 at 12:35

@ChidanandaNayak If the modal is an <iframe> that you want to display the PDF in, yes. But this example doesn't actually work; use your mostly-working-but-downloads-instead-of-shows version instead.

– wizzwizz4
Nov 18 '18 at 12:36

so, that render should download the pdf or just show the pdf in the browser.

– Chidananda Nayak
Nov 18 '18 at 11:47

@ChidanandaNayak It should show it in the browser. Basically, instead of using pdf.save, use pdf.output("datauristring") and then set the src of an iframe to that.

– wizzwizz4
Nov 18 '18 at 11:48

so here document.getElementById("show_pdf_here").src = pdf_uri; instead of show_pdf_here i should give my modal class or id?

– Chidananda Nayak
Nov 18 '18 at 12:35

@ChidanandaNayak If the modal is an <iframe> that you want to display the PDF in, yes. But this example doesn't actually work; use your mostly-working-but-downloads-instead-of-shows version instead.

– wizzwizz4
Nov 18 '18 at 12:36

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk