Joseph Izang
2 years ago
committed by
Aniket
parent
badf2ff705
commit
180cbd3b4c
@ -0,0 +1,286 @@ |
||||
import domToImage from 'dom-to-image'; |
||||
import { jsPDF } from 'jspdf'; |
||||
|
||||
const _cloneNode = (node, javascriptEnabled) => { |
||||
let child = node.firstChild |
||||
const clone = node.nodeType === 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false) |
||||
while (child) { |
||||
if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') { |
||||
clone.appendChild(_cloneNode(child, javascriptEnabled)) |
||||
} |
||||
child = child.nextSibling |
||||
} |
||||
if (node.nodeType === 1) { |
||||
if (node.nodeName === 'CANVAS') { |
||||
clone.width = node.width |
||||
clone.height = node.height |
||||
clone.getContext('2d').drawImage(node, 0, 0) |
||||
} else if (node.nodeName === 'TEXTAREA' || node.nodeName === 'SELECT') { |
||||
clone.value = node.value |
||||
} |
||||
clone.addEventListener('load', (() => { |
||||
clone.scrollTop = node.scrollTop |
||||
clone.scrollLeft = node.scrollLeft |
||||
}), true) |
||||
} |
||||
return clone |
||||
} |
||||
|
||||
const _createElement = (tagName, {className, innerHTML, style}) => { |
||||
let i |
||||
let scripts |
||||
const el = document.createElement(tagName) |
||||
if (className) { |
||||
el.className = className |
||||
} |
||||
if (innerHTML) { |
||||
el.innerHTML = innerHTML |
||||
scripts = el.getElementsByTagName('script') |
||||
i = scripts.length |
||||
while (i-- > 0) { |
||||
scripts[i].parentNode.removeChild(scripts[i]) |
||||
} |
||||
} |
||||
for (const key in style) { |
||||
el.style[key] = style[key]; |
||||
} |
||||
return el; |
||||
}; |
||||
|
||||
const _isCanvasBlank = canvas => { |
||||
const blank = document.createElement('canvas'); |
||||
blank.width = canvas.width; |
||||
blank.height = canvas.height; |
||||
const ctx = blank.getContext('2d'); |
||||
ctx.fillStyle = '#FFFFFF'; |
||||
ctx.fillRect(0, 0, blank.width, blank.height); |
||||
return canvas.toDataURL() === blank.toDataURL(); |
||||
}; |
||||
|
||||
const downloadPdf = (dom, options, cb) => { |
||||
const a4Height = 841.89; |
||||
const a4Width = 595.28; |
||||
let overrideWidth; |
||||
let container; |
||||
let containerCSS; |
||||
let containerWidth; |
||||
let elements; |
||||
let excludeClassNames; |
||||
let excludeTagNames; |
||||
let filename; |
||||
let filterFn; |
||||
let innerRatio; |
||||
let overlay; |
||||
let overlayCSS; |
||||
let pageHeightPx; |
||||
let proxyUrl; |
||||
let compression = 'NONE'; |
||||
let scale; |
||||
let opts; |
||||
let offsetHeight; |
||||
let offsetWidth; |
||||
let scaleObj; |
||||
let style; |
||||
const transformOrigin = 'top left'; |
||||
const pdfOptions = { |
||||
orientation: 'l', |
||||
unit: 'pt', |
||||
format: 'a4' |
||||
}; |
||||
|
||||
({filename, excludeClassNames = [], excludeTagNames = ['button', 'input', 'select'], overrideWidth, proxyUrl, compression, scale} = options); |
||||
|
||||
overlayCSS = { |
||||
position: 'fixed', |
||||
zIndex: 1000, |
||||
opacity: 0, |
||||
left: 0, |
||||
right: 0, |
||||
bottom: 0, |
||||
top: 0, |
||||
backgroundColor: 'rgba(0,0,0,0.8)' |
||||
}; |
||||
if (overrideWidth) { |
||||
overlayCSS.width = `${overrideWidth}px`; |
||||
} |
||||
containerCSS = { |
||||
position: 'absolute', |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
height: 'auto', |
||||
margin: 'auto', |
||||
overflow: 'auto', |
||||
backgroundColor: 'white' |
||||
}; |
||||
overlay = _createElement('div', { |
||||
style: overlayCSS |
||||
}); |
||||
container = _createElement('div', { |
||||
style: containerCSS |
||||
}); |
||||
container.appendChild(_cloneNode(dom)); |
||||
overlay.appendChild(container); |
||||
document.body.appendChild(overlay); |
||||
innerRatio = a4Height / a4Width; |
||||
containerWidth = overrideWidth || container.getBoundingClientRect().width; |
||||
pageHeightPx = Math.floor(containerWidth * innerRatio); |
||||
elements = container.querySelectorAll('*'); |
||||
|
||||
for (let i = 0, len = excludeClassNames.length; i < len; i++) { |
||||
const clName = excludeClassNames[i]; |
||||
container.querySelectorAll(`.${clName}`).forEach(function(a) { |
||||
return a.remove(); |
||||
}); |
||||
} |
||||
|
||||
for (let j = 0, len1 = excludeTagNames.length; j < len1; j++) { |
||||
const tName = excludeTagNames[j]; |
||||
let els = container.getElementsByTagName(tName); |
||||
|
||||
for (let k = els.length - 1; k >= 0; k--) { |
||||
if (!els[k]) { |
||||
continue; |
||||
} |
||||
els[k].parentNode.removeChild(els[k]); |
||||
} |
||||
} |
||||
|
||||
Array.prototype.forEach.call(elements, el => { |
||||
let clientRect; |
||||
let endPage; |
||||
let nPages; |
||||
let pad; |
||||
let rules; |
||||
let startPage; |
||||
rules = { |
||||
before: false, |
||||
after: false, |
||||
avoid: true |
||||
}; |
||||
clientRect = el.getBoundingClientRect(); |
||||
if (rules.avoid && !rules.before) { |
||||
startPage = Math.floor(clientRect.top / pageHeightPx); |
||||
endPage = Math.floor(clientRect.bottom / pageHeightPx); |
||||
nPages = Math.abs(clientRect.bottom - clientRect.top) / pageHeightPx; |
||||
// Turn on rules.before if the el is broken and is at most one page long.
|
||||
if (endPage !== startPage && nPages <= 1) { |
||||
rules.before = true; |
||||
} |
||||
// Before: Create a padding div to push the element to the next page.
|
||||
if (rules.before) { |
||||
pad = _createElement('div', { |
||||
style: { |
||||
display: 'block', |
||||
height: `${pageHeightPx - clientRect.top % pageHeightPx}px` |
||||
} |
||||
}); |
||||
return el.parentNode.insertBefore(pad, el); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// Remove unnecessary elements from result pdf
|
||||
filterFn = ({classList, tagName}) => { |
||||
let cName; |
||||
let j; |
||||
let len; |
||||
let ref; |
||||
if (classList) { |
||||
for (j = 0, len = excludeClassNames.length; j < len; j++) { |
||||
cName = excludeClassNames[j]; |
||||
if (Array.prototype.indexOf.call(classList, cName) >= 0) { |
||||
return false; |
||||
} |
||||
} |
||||
} |
||||
ref = tagName != null ? tagName.toLowerCase() : undefined; |
||||
return excludeTagNames.indexOf(ref) < 0; |
||||
}; |
||||
|
||||
opts = { |
||||
filter: filterFn, |
||||
proxy: proxyUrl |
||||
}; |
||||
|
||||
if (scale) { |
||||
offsetWidth = container.offsetWidth; |
||||
offsetHeight = container.offsetHeight; |
||||
style = { |
||||
transform: 'scale(' + scale + ')', |
||||
transformOrigin: transformOrigin, |
||||
width: offsetWidth + 'px', |
||||
height: offsetHeight + 'px' |
||||
}; |
||||
scaleObj = { |
||||
width: offsetWidth * scale, |
||||
height: offsetHeight * scale, |
||||
quality: 1, |
||||
style: style |
||||
}; |
||||
opts = Object.assign(opts, scaleObj); |
||||
} |
||||
|
||||
return domToImage.toCanvas(container, opts).then(canvas => { |
||||
let h; |
||||
let imgData; |
||||
let nPages; |
||||
let page; |
||||
let pageCanvas; |
||||
let pageCtx; |
||||
let pageHeight; |
||||
let pdf; |
||||
let pxFullHeight; |
||||
let w; |
||||
// Remove overlay
|
||||
document.body.removeChild(overlay); |
||||
// Initialize the PDF.
|
||||
pdf = new jsPDF(pdfOptions); |
||||
// Calculate the number of pages.
|
||||
pxFullHeight = canvas.height; |
||||
nPages = Math.ceil(pxFullHeight / pageHeightPx); |
||||
// Define pageHeight separately so it can be trimmed on the final page.
|
||||
pageHeight = a4Height; |
||||
pageCanvas = document.createElement('canvas'); |
||||
pageCtx = pageCanvas.getContext('2d'); |
||||
pageCanvas.width = canvas.width; |
||||
pageCanvas.height = pageHeightPx; |
||||
page = 0; |
||||
while (page < nPages) { |
||||
if (page === nPages - 1 && pxFullHeight % pageHeightPx !== 0) { |
||||
pageCanvas.height = pxFullHeight % pageHeightPx; |
||||
pageHeight = pageCanvas.height * a4Width / pageCanvas.width; |
||||
} |
||||
w = pageCanvas.width; |
||||
h = pageCanvas.height; |
||||
pageCtx.fillStyle = 'white'; |
||||
pageCtx.fillRect(0, 0, w, h); |
||||
pageCtx.drawImage(canvas, 0, page * pageHeightPx, w, h, 0, 0, w, h); |
||||
// Don't create blank pages
|
||||
if (_isCanvasBlank(pageCanvas)) { |
||||
++page; |
||||
continue; |
||||
} |
||||
// Add the page to the PDF.
|
||||
if (page) { |
||||
pdf.addPage(); |
||||
} |
||||
imgData = pageCanvas.toDataURL('image/PNG'); |
||||
pdf.addImage(imgData, 'PNG', 0, 0, a4Width, pageHeight, undefined, compression); |
||||
++page; |
||||
} |
||||
if (typeof cb === "function") { |
||||
cb(pdf); |
||||
} |
||||
return pdf.save(filename); |
||||
}).catch(error => { |
||||
// Remove overlay
|
||||
document.body.removeChild(overlay); |
||||
if (typeof cb === "function") { |
||||
cb(null); |
||||
} |
||||
return console.error(error); |
||||
}); |
||||
}; |
||||
|
||||
module.exports = downloadPdf; |
||||
Loading…
Reference in new issue