Prevent BlobProvider from being reactive

OS: macOs Mojave 10.14

React-pdf version: “@react-pdf/renderer”: “^1.0.0-alpha.19”,

Description: Currently I am using BlobProvider in this way…

{!this.props.loading ?
    <div style={{float:'left'}}>
      {this.props.pdfPrintable ?
         <BlobProvider document={this.generateOrderPDF(this.props.form.getFieldsValue())}>
         {({ url }) => (
            <Button href={url} target="_blank" type="primary" style={{marginRight:'5px'}} className="download-pdf-btn ant-btn btn-secondary ant-btn-primary" loading={false}>Print</Button>
         )}
         </BlobProvider>
      :
         <Button href="#" target="_blank" type="primary" style={{marginRight:'5px'}} className="download-pdf-btn ant-btn btn-secondary ant-btn-primary" loading={true}>Print</Button>
      }
   </div>
: null}

<Button loading={Session.get('processing')} className="btn-secondary" type="primary" htmlType="submit">Save</Button>

Basically, each time I enter any character in any field, or make any selection from a dropdown, or make a radio selection, the PDF is updating. After a lot of trial and error where the PDF was not rendering changes made in fields etc. this was the only way I was able to get everything to work.

After running into countless issues/errors where the PDF would try to update itself while it was already rendered, I had to implement the pdfPrintable state which basically, upon each change in the form, will disable the button, re-render the PDF and enable the button again.

However, this is really not ideal at all, as the whole form/page becomes very laggy because it has to update after every change. It was ok at first but my PDF has become quite complex and it is no longer a viable solution.

What I want is to only render the form when I click the ‘Print’ button. Is this possible?

[serkyen]

Thanks @diegomura

I’ve figured it out…

printPDF = () => {
  var obj = pdf(<BlankPDF />).toBlob();
  obj.then(function(blob) {
    var url = URL.createObjectURL(blob);
    window.open(url, '_blank');
  });
}

[claucarvajal]

Gracias@diegomura

Lo he descubierto…

printPDF = () => {
  var obj = pdf(<BlankPDF />).toBlob();
  obj.then(function(blob) {
    var url = URL.createObjectURL(blob);
    window.open(url, '_blank');
  });
}

Gracias amigo, tengo un pregunta, estoy enviando esto:

const printPDF = async ( descProyecto: string, etapa: string, idSello: number, idTomaDatosSelloCalidad: number ) => { console.log(“entre jiijij —”); var obj = pdf( <GenerarFormatoObra descProyecto={descProyecto} etapa={etapa} idSello={idSello} idTomaDatosSelloCalidad={idTomaDatosSelloCalidad} /> ).toBlob(); obj.then(function (blob) { var url = URL.createObjectURL(blob); window.open(url, “_blank”); }); };

como puede ver envió varios parámetros pero necesito que no se dispare aun el pdf, que espere porq tengo por dentro del documento muchas consultas y al generarlo queda en blanco