463 lines
15 KiB
JavaScript
463 lines
15 KiB
JavaScript
import html2pdf from 'html2pdf.js';
|
||
|
||
//
|
||
|
||
var script = {
|
||
props: {
|
||
showLayout: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
|
||
floatLayout: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
|
||
enableDownload: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
|
||
previewModal: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
|
||
paginateElementsByHeight: {
|
||
type: Number
|
||
},
|
||
|
||
filename: {
|
||
type: String,
|
||
default: ("" + (new Date().getTime()))
|
||
},
|
||
|
||
pdfQuality: {
|
||
type: Number,
|
||
default: 2,
|
||
},
|
||
|
||
pdfFormat: {
|
||
default: 'a4',
|
||
},
|
||
|
||
pdfOrientation: {
|
||
type: String,
|
||
default: 'portrait'
|
||
},
|
||
|
||
pdfContentWidth: {
|
||
default: '800px'
|
||
},
|
||
|
||
htmlToPdfOptions: {
|
||
type: Object
|
||
},
|
||
|
||
manualPagination: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
|
||
data: function data () {
|
||
return {
|
||
hasAlreadyParsed: false,
|
||
progress: 0,
|
||
pdfWindow: null,
|
||
pdfFile: null
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
progress: function progress (val) {
|
||
this.$emit('progress', val);
|
||
},
|
||
|
||
paginateElementsByHeight: function paginateElementsByHeight () {
|
||
this.resetPagination();
|
||
},
|
||
|
||
$props: {
|
||
handler: function handler () {
|
||
this.validateProps();
|
||
},
|
||
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
validateProps: function validateProps () {
|
||
// If manual-pagination is false, paginate-elements-by-height props is required
|
||
if (!this.manualPagination) {
|
||
if (this.paginateElementsByHeight === undefined) {
|
||
console.error('Error: paginate-elements-by-height is required if manual-pagination is false');
|
||
}
|
||
}
|
||
},
|
||
|
||
resetPagination: function resetPagination () {
|
||
var parentElement = this.$refs.pdfContent.firstChild;
|
||
var pageBreaks = parentElement.getElementsByClassName('html2pdf__page-break');
|
||
var pageBreakLength = pageBreaks.length - 1;
|
||
|
||
if (pageBreakLength === -1) { return }
|
||
|
||
this.hasAlreadyParsed = false;
|
||
|
||
// Remove All Page Break (For Pagination)
|
||
for (var x = pageBreakLength; x >= 0; x--) {
|
||
pageBreaks[x].parentNode.removeChild(pageBreaks[x]);
|
||
}
|
||
},
|
||
|
||
generatePdf: function generatePdf () {
|
||
this.$emit('startPagination');
|
||
this.progress = 0;
|
||
this.paginationOfElements();
|
||
},
|
||
|
||
paginationOfElements: function paginationOfElements () {
|
||
this.progress = 25;
|
||
|
||
/*
|
||
When this props is true,
|
||
the props paginate-elements-by-height will not be used.
|
||
Instead the pagination process will rely on the elements with a class "html2pdf__page-break"
|
||
to know where to page break, which is automatically done by html2pdf.js
|
||
*/
|
||
if (this.manualPagination) {
|
||
this.progress = 70;
|
||
this.$emit('hasPaginated');
|
||
this.downloadPdf();
|
||
return
|
||
}
|
||
|
||
if (!this.hasAlreadyParsed) {
|
||
var parentElement = this.$refs.pdfContent.firstChild;
|
||
var ArrOfContentChildren = Array.from(parentElement.children);
|
||
var childrenHeight = 0;
|
||
|
||
/*
|
||
Loop through Elements and add there height with childrenHeight variable.
|
||
Once the childrenHeight is >= this.paginateElementsByHeight, create a div with
|
||
a class named 'html2pdf__page-break' and insert the element before the element
|
||
that will be in the next page
|
||
*/
|
||
for (var childElement of ArrOfContentChildren) {
|
||
// Get The First Class of the element
|
||
var elementFirstClass = childElement.classList[0];
|
||
var isPageBreakClass = elementFirstClass === 'html2pdf__page-break';
|
||
if (isPageBreakClass) {
|
||
childrenHeight = 0;
|
||
} else {
|
||
// Get Element Height
|
||
var elementHeight = childElement.clientHeight;
|
||
|
||
// Get Computed Margin Top and Bottom
|
||
var elementComputedStyle = childElement.currentStyle || window.getComputedStyle(childElement);
|
||
var elementMarginTopBottom = parseInt(elementComputedStyle.marginTop) + parseInt(elementComputedStyle.marginBottom);
|
||
|
||
// Add Both Element Height with the Elements Margin Top and Bottom
|
||
var elementHeightWithMargin = elementHeight + elementMarginTopBottom;
|
||
|
||
if ((childrenHeight + elementHeight) < this.paginateElementsByHeight) {
|
||
childrenHeight += elementHeightWithMargin;
|
||
} else {
|
||
var section = document.createElement('div');
|
||
section.classList.add('html2pdf__page-break');
|
||
parentElement.insertBefore(section, childElement);
|
||
|
||
// Reset Variables made the upper condition false
|
||
childrenHeight = elementHeightWithMargin;
|
||
}
|
||
}
|
||
}
|
||
|
||
this.progress = 70;
|
||
|
||
/*
|
||
Set to true so that if would generate again we wouldn't need
|
||
to parse the HTML to paginate the elements
|
||
*/
|
||
this.hasAlreadyParsed = true;
|
||
} else {
|
||
this.progress = 70;
|
||
}
|
||
|
||
this.$emit('hasPaginated');
|
||
this.downloadPdf();
|
||
},
|
||
|
||
downloadPdf: async function downloadPdf () {
|
||
// Set Element and Html2pdf.js Options
|
||
var pdfContent = this.$refs.pdfContent;
|
||
var options = this.setOptions();
|
||
|
||
this.$emit('beforeDownload', { html2pdf: html2pdf, options: options, pdfContent: pdfContent });
|
||
|
||
var html2PdfSetup = html2pdf().set(options).from(pdfContent);
|
||
var pdfBlobUrl = null;
|
||
|
||
if (this.previewModal) {
|
||
this.pdfFile = await html2PdfSetup.output('bloburl');
|
||
pdfBlobUrl = this.pdfFile;
|
||
}
|
||
|
||
if (this.enableDownload) {
|
||
pdfBlobUrl = await html2PdfSetup.save().output('bloburl');
|
||
}
|
||
|
||
if (pdfBlobUrl) {
|
||
var res = await fetch(pdfBlobUrl);
|
||
var blobFile = await res.blob();
|
||
this.$emit('hasDownloaded', blobFile);
|
||
}
|
||
|
||
this.progress = 100;
|
||
},
|
||
|
||
setOptions: function setOptions () {
|
||
if (this.htmlToPdfOptions !== undefined && this.htmlToPdfOptions !== null) {
|
||
return this.htmlToPdfOptions
|
||
}
|
||
|
||
return {
|
||
margin: 0,
|
||
|
||
filename: ((this.filename) + ".pdf"),
|
||
|
||
image: {
|
||
type: 'jpeg',
|
||
quality: 0.98
|
||
},
|
||
|
||
enableLinks: false,
|
||
|
||
html2canvas: {
|
||
scale: this.pdfQuality,
|
||
useCORS: true
|
||
},
|
||
|
||
jsPDF: {
|
||
unit: 'in',
|
||
format: this.pdfFormat,
|
||
orientation: this.pdfOrientation
|
||
}
|
||
}
|
||
},
|
||
|
||
closePreview: function closePreview () {
|
||
this.pdfFile = null;
|
||
}
|
||
}
|
||
};
|
||
|
||
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
||
if (typeof shadowMode !== 'boolean') {
|
||
createInjectorSSR = createInjector;
|
||
createInjector = shadowMode;
|
||
shadowMode = false;
|
||
}
|
||
// Vue.extend constructor export interop.
|
||
var options = typeof script === 'function' ? script.options : script;
|
||
// render functions
|
||
if (template && template.render) {
|
||
options.render = template.render;
|
||
options.staticRenderFns = template.staticRenderFns;
|
||
options._compiled = true;
|
||
// functional template
|
||
if (isFunctionalTemplate) {
|
||
options.functional = true;
|
||
}
|
||
}
|
||
// scopedId
|
||
if (scopeId) {
|
||
options._scopeId = scopeId;
|
||
}
|
||
var hook;
|
||
if (moduleIdentifier) {
|
||
// server build
|
||
hook = function (context) {
|
||
// 2.3 injection
|
||
context =
|
||
context || // cached call
|
||
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
||
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
|
||
// 2.2 with runInNewContext: true
|
||
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
||
context = __VUE_SSR_CONTEXT__;
|
||
}
|
||
// inject component styles
|
||
if (style) {
|
||
style.call(this, createInjectorSSR(context));
|
||
}
|
||
// register component module identifier for async chunk inference
|
||
if (context && context._registeredComponents) {
|
||
context._registeredComponents.add(moduleIdentifier);
|
||
}
|
||
};
|
||
// used by ssr in case component is cached and beforeCreate
|
||
// never gets called
|
||
options._ssrRegister = hook;
|
||
}
|
||
else if (style) {
|
||
hook = shadowMode
|
||
? function (context) {
|
||
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
||
}
|
||
: function (context) {
|
||
style.call(this, createInjector(context));
|
||
};
|
||
}
|
||
if (hook) {
|
||
if (options.functional) {
|
||
// register for functional component in vue file
|
||
var originalRender = options.render;
|
||
options.render = function renderWithStyleInjection(h, context) {
|
||
hook.call(context);
|
||
return originalRender(h, context);
|
||
};
|
||
}
|
||
else {
|
||
// inject component registration as beforeCreate hook
|
||
var existing = options.beforeCreate;
|
||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||
}
|
||
}
|
||
return script;
|
||
}
|
||
|
||
var isOldIE = typeof navigator !== 'undefined' &&
|
||
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
|
||
function createInjector(context) {
|
||
return function (id, style) { return addStyle(id, style); };
|
||
}
|
||
var HEAD;
|
||
var styles = {};
|
||
function addStyle(id, css) {
|
||
var group = isOldIE ? css.media || 'default' : id;
|
||
var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
|
||
if (!style.ids.has(id)) {
|
||
style.ids.add(id);
|
||
var code = css.source;
|
||
if (css.map) {
|
||
// https://developer.chrome.com/devtools/docs/javascript-debugging
|
||
// this makes source maps inside style tags work properly in Chrome
|
||
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
|
||
// http://stackoverflow.com/a/26603875
|
||
code +=
|
||
'\n/*# sourceMappingURL=data:application/json;base64,' +
|
||
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
|
||
' */';
|
||
}
|
||
if (!style.element) {
|
||
style.element = document.createElement('style');
|
||
style.element.type = 'text/css';
|
||
if (css.media)
|
||
{ style.element.setAttribute('media', css.media); }
|
||
if (HEAD === undefined) {
|
||
HEAD = document.head || document.getElementsByTagName('head')[0];
|
||
}
|
||
HEAD.appendChild(style.element);
|
||
}
|
||
if ('styleSheet' in style.element) {
|
||
style.styles.push(code);
|
||
style.element.styleSheet.cssText = style.styles
|
||
.filter(Boolean)
|
||
.join('\n');
|
||
}
|
||
else {
|
||
var index = style.ids.size - 1;
|
||
var textNode = document.createTextNode(code);
|
||
var nodes = style.element.childNodes;
|
||
if (nodes[index])
|
||
{ style.element.removeChild(nodes[index]); }
|
||
if (nodes.length)
|
||
{ style.element.insertBefore(textNode, nodes[index]); }
|
||
else
|
||
{ style.element.appendChild(textNode); }
|
||
}
|
||
}
|
||
}
|
||
|
||
/* script */
|
||
var __vue_script__ = script;
|
||
|
||
/* template */
|
||
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-html2pdf"},[_c('section',{staticClass:"layout-container",class:{
|
||
'show-layout' : _vm.showLayout,
|
||
'unset-all' : !_vm.floatLayout
|
||
}},[_c('section',{ref:"pdfContent",staticClass:"content-wrapper",style:(("width: " + _vm.pdfContentWidth + ";"))},[_vm._t("pdf-content")],2)]),_vm._v(" "),_c('transition',{attrs:{"name":"transition-anim"}},[(_vm.pdfFile)?_c('section',{staticClass:"pdf-preview"},[_c('button',{on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }return _vm.closePreview()}}},[_vm._v("\n\t\t\t\t\t×\n\t\t\t\t")]),_vm._v(" "),_c('iframe',{attrs:{"src":_vm.pdfFile,"width":"100%","height":"100%"}})]):_vm._e()])],1)};
|
||
var __vue_staticRenderFns__ = [];
|
||
|
||
/* style */
|
||
var __vue_inject_styles__ = function (inject) {
|
||
if (!inject) { return }
|
||
inject("data-v-1fd3ad26_0", { source: ".vue-html2pdf .layout-container[data-v-1fd3ad26]{position:fixed;width:100vw;height:100vh;left:-100vw;top:0;z-index:-9999;background:rgba(95,95,95,.8);display:flex;justify-content:center;align-items:flex-start;overflow:auto}.vue-html2pdf .layout-container.show-layout[data-v-1fd3ad26]{left:0;z-index:9999}.vue-html2pdf .layout-container.unset-all[data-v-1fd3ad26]{all:unset;width:auto;height:auto}.vue-html2pdf .pdf-preview[data-v-1fd3ad26]{position:fixed;width:65%;min-width:600px;height:80vh;top:100px;z-index:9999999;left:50%;transform:translateX(-50%);border-radius:5px;box-shadow:0 0 10px #00000048}.vue-html2pdf .pdf-preview button[data-v-1fd3ad26]{position:absolute;top:-20px;left:-15px;width:35px;height:35px;background:#555;border:0;box-shadow:0 0 10px #00000048;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}.vue-html2pdf .pdf-preview iframe[data-v-1fd3ad26]{border:0}.vue-html2pdf .transition-anim-enter-active[data-v-1fd3ad26],.vue-html2pdf .transition-anim-leave-active[data-v-1fd3ad26]{transition:opacity .3s ease-in}.vue-html2pdf .transition-anim-enter[data-v-1fd3ad26],.vue-html2pdf .transition-anim-leave-to[data-v-1fd3ad26]{opacity:0}", map: undefined, media: undefined });
|
||
|
||
};
|
||
/* scoped */
|
||
var __vue_scope_id__ = "data-v-1fd3ad26";
|
||
/* module identifier */
|
||
var __vue_module_identifier__ = undefined;
|
||
/* functional template */
|
||
var __vue_is_functional_template__ = false;
|
||
/* style inject SSR */
|
||
|
||
/* style inject shadow dom */
|
||
|
||
|
||
|
||
var __vue_component__ = /*#__PURE__*/normalizeComponent(
|
||
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
||
__vue_inject_styles__,
|
||
__vue_script__,
|
||
__vue_scope_id__,
|
||
__vue_is_functional_template__,
|
||
__vue_module_identifier__,
|
||
false,
|
||
createInjector,
|
||
undefined,
|
||
undefined
|
||
);
|
||
|
||
// Import vue component
|
||
|
||
// install function executed by Vue.use()
|
||
function install(Vue) {
|
||
if (install.installed) { return; }
|
||
install.installed = true;
|
||
Vue.component('VueHtml2pdf', __vue_component__);
|
||
}
|
||
|
||
// Create module definition for Vue.use()
|
||
var plugin = {
|
||
install: install,
|
||
};
|
||
|
||
// To auto-install when vue is found
|
||
/* global window global */
|
||
var GlobalVue = null;
|
||
if (typeof window !== 'undefined') {
|
||
GlobalVue = window.Vue;
|
||
} else if (typeof global !== 'undefined') {
|
||
GlobalVue = global.Vue;
|
||
}
|
||
if (GlobalVue) {
|
||
GlobalVue.use(plugin);
|
||
}
|
||
|
||
// Inject install function into component - allows component
|
||
// to be registered via Vue.use() as well as Vue.component()
|
||
__vue_component__.install = install;
|
||
|
||
// It's possible to expose named exports when writing components that can
|
||
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
|
||
// export const RollupDemoDirective = component;
|
||
|
||
export default __vue_component__;
|