5

Actualmente vengo desarrollando una aplicación en la que el usuario envia cierta información al servidor y este le devuelve un reporte en respuesta (archivo pdf).

El código de mi servicio lo dejo a continuación:

[WebInvoke(Method = "GET", UriTemplate = "file")]
public Stream GetFile(){ 
    MemoryStream ms = new MemoryStream();
    Document doc = new Document(PageSize.A4, 30f, 30f, 30f, 30f);
    PdfWriter writer = PdfWriter.GetInstance(doc, ms);
    doc.Open();
    doc.Add(new Chunk("hello world"));
    doc.Close();
    byte[] Result = ms.ToArray();

    return new MemoryStream(Result);
}

La petición Ajax es la siguiente:

var _test = function () {
    $.ajax({
        type: 'GET',
        url: pathservicehost + '/file',            
        contentType: 'application/pdf',
        success: function (data) {
            console.log('ok');
            var blob = new Blob([data], { type: 'application/pdf' });
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = "report.pdf";
            link.click();
        },
        error: function (e) {
            alert('reporte falló ...');
        }
    });

Cuando coloco la URL del servicio en el navegador, el pdf es generado correctamente, sin embargo si dicho servicio es llamado desde algún evento lo único que se visualiza (descarga) es un pdf en blanco.

Espero alguien pueda ayudarme. Saludos

2
  • 2
    No se pueden descargar archivos por Ajax.
    – user227
    el 18 abr. 2016 a las 20:23
  • 2
    @LuiggiMendoza ese comentario merece algunos matices: se pueden enviar ficheros como texto (p.e.: codificados en base64) o como blobs (como intenta hacer OP) para ser interpretados en el cliente
    – Alvaro Montoro
    el 19 abr. 2016 a las 12:55

1 respuesta 1

4

Esta respuesta está basada en esta respuesta de Ciantic en StackOverflow en inglés, en ella también se menciona un artículo de HTML5Rocks como base.

El problema que te estás encontrando es que jQuery no soporta blobs con AJAX... y no los va a soportar por lo que se comenta en este reporte de bug del sitio de jQuery (cerrado con la etiqueta "wontfix" para indicar que no se va a arreglar).

La alternativa es utilizar xhr con blobs directamente sin usar jQuery. El código se vería así:

var _test = function () {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', pathservicehost + '/file', true);
    xhr.responseType = 'blob';

    xhr.onload = function(e) {
      if (this.status == 200) {
        var blob = new Blob([this.response], {type: 'application/pdf'});
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "report.pdf";
        link.click();       
      }
    };

    xhr.send();
}

Con ese código el archivo PDF se ve correctamente en lugar de verse en blanco.

2
  • muchas gracias el código me anda perfecto. el 19 abr. 2016 a las 17:04
  • Estoy usando este código js, baja y abro el pdf y me dice que contiene error, use el codigo c# de la pregunta para probar y me pasa lo del error. @alexanderzevallos
    – Acd
    el 25 sep. 2017 a las 19:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.