evidenceprime / html-docx-js

Converts HTML documents to DOCX in the browser
http://evidenceprime.github.io/html-docx-js/
MIT License
1.05k stars 286 forks source link

How can pass ID from asBlob - use on React #69

Closed fsabreu closed 6 years ago

fsabreu commented 6 years ago

Hi,

I loved your work. But I don't understand how can I use this properly.

I'm tryng to use this on react but I don't know how can I pass the div ID of what I want to save.

Can you help me ?

This is my code so far(I have a PDF converter too): `import React, {Component} from 'react'; import { FormattedMessage } from 'react-intl'; import messages from './messages'; import NavBar from 'components/NavBar'; import VerticalNav from 'components/VerticalNav'; import htmlDocx from 'html-docx-js/dist/html-docx'; import { saveAs } from 'file-saver';

export default class PDF extends React.Component { // eslint-disable-line react/prefer-stateless-function

constructor(props){ super(props); this.pdfToHTML = this.pdfToHTML.bind(this); this.docxToHTML = this.docxToHTML.bind(this); this.state = { } }

// HTML TO PDF pdfToHTML(){ var pdf = new jsPDF('p', 'pt', 'letter'); var source = $('#HTMLtoPDF')[0]; var specialElementHandlers = { '#bypassme': function(element, renderer) { return true } };

var margins = {
  top: 50,
  left: 60,
  width: 545
};

pdf.fromHTML (
  source // HTML string or DOM elem ref.
  , margins.left // x coord
  , margins.top // y coord
  , {
    'width': margins.width // max width of content on PDF
    , 'elementHandlers': specialElementHandlers
  },
  function (dispose) {
    // dispose: object with X, Y of the last line add to the PDF
    // this allow the insertion of new lines after html
    pdf.save('html2pdf.pdf');
  }
)

}

//HTML TO DOCX docxToHTML(){ var content = htmlDocx.asBlob(content) saveAs(content, 'test.docx') }

render() { return (


Versão A

Prova de Geografia 3º ano EF1

Nome: _____________________________________________
Turma: ______________
Data: ____________________________

Instruções:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque porta velit vitae mattis. Curabitur vel lorem sed diam condimentum congue. Nulla et sapien enim.

Perguntas

1

Pergunta de teste

A.

Alternativa 1

B.

Alternativa 2

C.

Alternativa 3

D.

Alternativa 4

);

} } `

fsabreu commented 6 years ago

I solved this problem using the @PrathyushaNarayanan code on #52. But now I dont know how can I entity the exported code.

I tried put but doesn't work.