Export html table into pdf using blob

Question

i want to know that how can i export pdf file from angularjs. I've exported excel file and it is working fine.

following is code for excel

view.html

<button ng-click="vm.exportData()" class="btn btn-info"><i class="glyphicon glyphicon-download"></i>&nbsp; Download as pdf</button>

controller.js

 $scope.exportData = function () {
        debugger;
        var blob = new Blob([document.getElementById('export').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        });
        window.saveAs(blob, "Report.xls");
    },

how to do type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" <======this linein pdf?

Thanks in advance :)

Just as @CodingNinja said, 'type': 'application/pdf' should be work — huan feng
– huan feng, Commented Feb 2, 2016 at 6:29
Yes... i tried that, the file gets downloaded but gives the error "Failed to load pdf content" when i try to open it.. — Mohanish Gupte
– Mohanish Gupte, Commented Feb 2, 2016 at 6:30

huan feng · Accepted Answer · 2016-02-02 06:39:36Z

0

Update:

You can retrieve the pdf content as ArrayBuffer by set responseType:

  $http({
                url: url,
                method: method,
                headers: {
                    'Content-type': _type
                },
                responseType: 'arraybuffer' //set response type
            })

Note:

type -> 'application/pdf'

fileContent -> should be an ArrayBuffer

downloadFile(filename, 'application/pdf', fileContent);

function downloadFile(filename, type, fileContent) {
    var blob = new Blob([fileContent], {type: type});
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement('a');
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

edited Feb 2, 2016 at 6:39

answered Feb 2, 2016 at 6:33

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohanish Gupte Over a year ago

Well, m not sure where should i use the response type as "array buffer" because i have defined that function on a button click inside its controller and not calling it through any http link..

huan feng Over a year ago

If you content isn't binary data from server, you can check this lib out:code.google.com/archive/p/jspdf

Collectives™ on Stack Overflow

Export html table into pdf using blob

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related