Saltar al contenido

¿Cómo codificar en base64 un archivo generado con jspdf y html2canvas?

Esta es el arreglo más válida que encomtrarás compartir, pero primero mírala detenidamente y analiza si es compatible a tu proyecto.

Solución:

Primero, jsPDF no es nativo en javascript, asegúrese de haber incluido la fuente adecuada y, después de echar un vistazo a otras referencias, creo que no necesita la función btoa() para convertir doc.output(), solo especifique así:

 doc.output('datauri');

Segundo, codificado en base 64 string es posible contener ‘+’ , ‘ / ‘ , ‘ = ‘ellos no son URL seguro caracteres, necesita reemplazarlos o no puede lidiar con ajax.

Sin embargo, en mi propia experiencia, dependiendo del tamaño del archivo, ¡es fácil ser muy largo! antes de alcanzar el límite de longitud de caracteres del método GET, codificado string bloqueará su herramienta de desarrollo web primero, y la depuración sería difícil.

Mi sugerencia, según tu código jquery.

processData: false,
contentType: false

Es una configuración común para enviar tal vez Expediente o Gota object, solo eche un vistazo a jsPDF, está disponible para convertir sus datos a blob:

doc.output('blob');

así que revisa tu código completamente:

var img = canvas.toDataURL("image/png");
var doc = new jsPDF("l", "pt", "letter");
doc.addImage(img, 'JPEG',20,20);
var file = doc.output('blob');
var fd = new FormData();     // To carry on your data  
fd.append('mypdf',file);

$.ajax(
   url: '/model/send',   //here is also a problem, depends on your 
   data: fd,           //backend language, it may looks like '/model/send.php'
   dataType: 'text',
   processData: false,
   contentType: false,
   type: 'POST',
   success: function (response) 
     alter('Exit to send request');
   ,
   error: function (jqXHR) 
     alter('Failure to send request');
   
);

y si está utilizando php en su backend, podría echar un vistazo a la información de sus datos:

echo $_FILES['mypdf'];

Recuerda que puedes compartir esta crónica si te fue útil.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *