@devm7mdali/pdf-maker
Version:
PDF maker web component
5 lines (4 loc) • 3.52 kB
JavaScript
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 r=document.createElement("textarea");r.rows=6,r.placeholder="Enter / paste HTML to convert to PDF";const s=document.createElement("button");s.textContent="Generate PDF";const o=document.createElement("div");o.className="status",this._textarea=r,this._button=s,this._status=o,s.addEventListener("click",async()=>{const n=r.value.trim();if(!n)return alert("Please provide HTML content.");this._dispatch("start",{html:n}),o.textContent="Requesting PDF...",o.className="status",s.disabled=!0;try{const a=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({html:n,orientation:"portrait"})}),r=a.headers.get("content-type")||"";if(!a.ok){let t="";try{t=r.includes("json")?JSON.stringify(await a.json()):(await a.text()).slice(0,200)}catch{}throw new Error(`HTTP ${a.status} ${t}`)}if(!r.includes("application/pdf"))throw new Error(`Unexpected content-type ${r}`);const s=await a.blob(),i=URL.createObjectURL(s),d=document.createElement("a");d.href=i,d.download=e,document.body.appendChild(d),d.click(),d.remove(),URL.revokeObjectURL(i),o.textContent="PDF downloaded."}catch(t){const e="Error: "+(t.message||t);o.textContent=e,o.className="status error",this._dispatch("error",{error:t,html:n})}finally{s.disabled=!1}}),a.appendChild(r),a.appendChild(s),a.appendChild(o),this.shadowRoot.append(n,a)}}customElements.define("pdf-maker",t);export{t as default};
//# sourceMappingURL=pdf-maker.esm.min.js.map