Работа с документами в javascript

ДОКУМЕНТЫ В JAVASCRIPT И НЕ ТОЛЬКО

ДМИТРИЙ РАДЫНО

ВИДЫ ДОКУМЕНТОВ

• Текстовые документы – DOCX, DOC, RTF

• Таблицы – XLSX, XLS, CSV

• Portable document format - PDF

DOCX

RENDERING DOCX

MAMMOTH.JS - .DOCX TO HTML CONVERTER

• Headings

• Lists

• Images

• Bold, italics, underlines, superscript and subscript

• Links

• Line breaks

Clone on GitHub

RENDERING DOCX

MAMMOTH.JS - .DOCX TO HTML CONVERTERmammoth.convertToHtml({arrayBuffer: arrayBuffer}) .then(function(result) { output.innerHTML = result.value; }).done();

GENERATING DOCX

DOCXTEMPLATER

DocxTemplater

{#products} {name}, {price} €{/products}

Hello {name} !

{#repo} <b>{name}</b>{/repo}{^repo} No repos :({/repo}

GENERATING DOCX

DOCXTEMPLATER

var doc = new DocxGen().loadFromFile("template.docx", {});doc.applyTags({ "author": "MyFirstAuthorName", "products": [ {name:"Windows",price:100}, {name:"Mac OSX",price:200}, {name:"Ubuntu",price:0} ]});doc.output({ "download": true, name: "file.docx" });

GENERATING DOCX

DOCXTEMPLATER

DOCX.JS

DOC

RTF – RICH TEXT FORMAT

RTF – RICH TEXT FORMAT

Text: 43 bytesFile size: 41 667 bytes

RTF – RICH TEXT FORMAT

XLSX

JS-XLSX – PARSING FILEvar data = e.target.result, workbook = XLSX.read(data, {type: 'binary'}), name = workbook.SheetNames[0], data = workbook.Sheets[name], range = XLSX.utils.decode_range(data["!ref"]), json = XLSX.utils.sheet_to_json(data);

JS-XLSX – UTILS

decode_cell/range/row/colencode_cell/range/row/colsheet_to_csvsheet_to_jsonsheet_to_formulae

EXCEL-BUILDER.JS – GENERATE FILE

var data = [ ['Artist', 'Album', 'Price'], ['Buckethead', 'Albino Slug', 8.99], ['Buckethead', 'Electric Tears', 13.99], ['Buckethead', 'Colma', 11.34], ['Crystal Method', 'Vegas', 10.54], ['Crystal Method', 'Tweekend', 10.64], ['Crystal Method', 'Divided By Night', 8.99]];var workbook = EB.createWorkbook(), worksheet = workbook.createWorksheet({name: 'MyFirstWorkingSheet'}); worksheet.setData(data);var base64 = EB.createFile(workbook)

XLS

JS-XLSX = JS-XLS

CSV

CSV – PARSING FILE

var parseCSV = function(csvText) { var lines = csvText.split("\n"), line, i, data = [];

for (i = 0; i < lines.length; i++) { line = lines[i]; if (line.length > 0) { data.push(line.split(",")); } } return data;};

CSV – GENERATING FILE

var generateCSV = function(csvData) { var lines = [], i; for (i = 0; i < csvData.length; i++) { lines.push(csvData[i].join(",")); } return lines.join("\n");}

HTML TO XLSX

HTML TO XLSX

HTML TO XLSX

PDF.JS – PORTABLE DOCUMENT FORMATvar url = './helloworld.pdf';PDFJS.workerSrc = "scripts/pdf.worker.js";PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { pdf.getPage(1).then(function getPageHelloWorld(page) { var desiredWidth = document.body.offsetWidth; var viewport = page.getViewport(1); var scale = desiredWidth / viewport.width; var viewport = page.getViewport(scale); var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); });});

GOOGLE DOCS VIEWER

GOOGLE DOCS VIEWER

<iframe class="docBox" src="http://docs.google.com/viewer?url=http://pathtofile.pdf&embedded=true"></iframe>

GOOGLE DOCS VIEWER

CLOUDCONVERT.ORG

CLOUDCONVERT.ORG

<form action=https://api.cloudconvert.org/convert method="POST" enctype="multipart/form-data"> <input type="hidden" name="apikey" value="…"> <input type="hidden" name="input" value="upload"> <input type="hidden" name="download" value="inline"> <input type="hidden" name="inputformat" value="docx"> <input type="hidden" name="outputformat" value="html"> <input type="file" name="file"> <input type="submit" value="Convert!"></form>

CLOUDCONVERT.ORG

ASPOSE.COM

QUESTIONS?

Дмитрий Радыно:

Twitter: @radyno Facebook: dmitry.radyno Email: dmitry.radyno@gmail.com