2
    import sample from './response.pdf'

React-pdf Component.

<Document
    file={sample}
     onLoadSuccess={this.onDocumentLoad} >
    <Page pageNumber={pageNumber} />
 </Document>

I am using manual PDF in the document component. So its working fine Is there any way to show Html file in file key. example: I have a html like this

sample1=Html code etc ...

<Document
    file={sample1}
     onLoadSuccess={this.onDocumentLoad} >
    <Page pageNumber={pageNumber} />
 </Document>

This I tried, Can anyone guide be how to use this.

user9883888
  • 389
  • 1
  • 8
  • 17

1 Answers1

0

This is just a PDF viewer that takes whole file as a parameter and displays it to you.

To convert an HTML string/file to PDF you would need another package that uses string content as stream and converts it for you.

You can have a look at this package available html-to-pdf

Usage

var htmlToPdf = require('html-to-pdf');
var html = ...; //Some HTML String from code above

htmlToPdf.convertHTMLString(html, 'path/to/destination.pdf',
    function (error, success) {
        if (error) {
            console.log('Oh noes! Errorz!');
            console.log(error);
        } else {
            console.log('Woot! Success!');
            console.log(success);
        }
    }
);
Manoz
  • 6,507
  • 13
  • 68
  • 114
  • i want to save it in same path htmlToPdf.convertHTMLString(html, './previewpage.pdf', Will it save in the same path only – user9883888 Jun 06 '18 at 06:38
  • yes it will save in same path if you do this `./previewpage.pdf` – Manoz Jun 06 '18 at 06:44
  • you need to implement this method in backend of node. I suppose you are trying it in component file? – Manoz Jun 06 '18 at 06:55
  • that is wrong. This should be happening at server itself. Basically, A browser don't convert streams to file for security purposes. You will need to pass your html content to backend via some function in your component that will get you file written on desired location. – Manoz Jun 06 '18 at 07:05