@devm7mdali/pdf-maker
Version:
PDF maker web component
5 lines (4 loc) • 3.74 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).PDFMaker=e()}(this,function(){"use strict";class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._defaultFilename="document.pdf",this._textarea=null,this._button=null,this._status=null}static get observedAttributes(){
//! explained at the top
return["api-key","endpoint","filename","orientation","placeholder"]}attributeChangedCallback(t,e,n){if(e!==n)switch(t){case"placeholder":this._textarea&&(this._textarea.placeholder=n||"Enter / paste HTML to convert to PDF");break;case"filename":this._defaultFilename=n||"document.pdf"}}get html(){return this._textarea?.value||""}set html(t){this._textarea&&(this._textarea.value=t||"")}get loading(){return this._button?.disabled||!1}get status(){return this._status?.textContent||""}async generatePDF(){if(!this._button)throw new Error("Component not ready");return new Promise((t,e)=>{const n=e=>{this.removeEventListener("pdf-maker:success",n),this.removeEventListener("pdf-maker:error",a),t(e.detail.blob)},a=t=>{this.removeEventListener("pdf-maker:success",n),this.removeEventListener("pdf-maker:error",a),e(t.detail.error)};this.addEventListener("pdf-maker:success",n,{once:!0}),this.addEventListener("pdf-maker:error",a,{once:!0}),this._button.click()})}_dispatch(t,e={}){this.dispatchEvent(new CustomEvent(`pdf-maker:${t}`,{detail:e,bubbles:!0,cancelable:!1}))}connectedCallback(){this.getAttribute("api-key");const t=this.getAttribute("endpoint")||"https://your-api.com/upload",e=this.getAttribute("filename")||"document.pdf";this.getAttribute("orientation");const n=document.createElement("style");n.textContent="\n .uploader { display: flex; flex-direction: column; gap: 8px; font-family: system-ui,sans-serif; }\n textarea { border: 1px solid #ccc; border-radius: 6px; padding: 6px; font-family: monospace; }\n button { background:#4f46e5; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }\n button:disabled { opacity:.6; cursor:progress; }\n .status { font-size:12px; color:#555; min-height:16px; }\n ";const a=document.createElement("div");a.className="uploader";const o=document.createElement("textarea");o.rows=6,o.placeholder="Enter / paste HTML to convert to PDF";const r=document.createElement("button");r.textContent="Generate PDF";const s=document.createElement("div");s.className="status",this._textarea=o,this._button=r,this._status=s,r.addEventListener("click",async()=>{const n=o.value.trim();if(!n)return alert("Please provide HTML content.");this._dispatch("start",{html:n}),s.textContent="Requesting PDF...",s.className="status",r.disabled=!0;try{const a=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({html:n,orientation:"portrait"})}),o=a.headers.get("content-type")||"";if(!a.ok){let t="";try{t=o.includes("json")?JSON.stringify(await a.json()):(await a.text()).slice(0,200)}catch{}throw new Error(`HTTP ${a.status} ${t}`)}if(!o.includes("application/pdf"))throw new Error(`Unexpected content-type ${o}`);const r=await a.blob(),i=URL.createObjectURL(r),d=document.createElement("a");d.href=i,d.download=e,document.body.appendChild(d),d.click(),d.remove(),URL.revokeObjectURL(i),s.textContent="PDF downloaded."}catch(t){const e="Error: "+(t.message||t);s.textContent=e,s.className="status error",this._dispatch("error",{error:t,html:n})}finally{r.disabled=!1}}),a.appendChild(o),a.appendChild(r),a.appendChild(s),this.shadowRoot.append(n,a)}}return customElements.define("pdf-maker",t),t});
//# sourceMappingURL=pdf-maker.umd.min.js.map