From 319c23e69eacce9504fb41b4cefd722783bc3e12 Mon Sep 17 00:00:00 2001
From: Local Build <build@local.dev>
Date: Thu, 13 Aug 2026 21:14:24 +0200
Subject: [PATCH] fix(pdf): switch to window.print() for reliable PDF export

html2canvas (bundled in html2pdf.js) can't parse CSS color-mix()
function regardless of onclone workarounds. Using window.print()
which leverages the browser's native renderer with full CSS support.
In Chrome/Edge the print dialog defaults to 'Save as PDF' destination.
---
 public/resume-5.html    | 116 ++++++++++------------------------------
 src/pages/resume-5.html | 116 ++++++++++------------------------------
 2 files changed, 54 insertions(+), 178 deletions(-)

diff --git a/public/resume-5.html b/public/resume-5.html
index 06e4b2e..c49867b 100644
--- a/public/resume-5.html
+++ b/public/resume-5.html
@@ -973,23 +973,10 @@
     <script>
     (function () {
       var btn = document.querySelector('[data-resume-pdf-btn]');
-      console.log('[PDF] btn found:', !!btn);
       if (!btn) return;
 
-      var CDN = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.2/html2pdf.bundle.min.js';
       var busy = false;
 
-      function loadScript(src) {
-        return new Promise(function (ok, fail) {
-          if (window.html2pdf) { ok(); return; }
-          var s = document.createElement('script');
-          s.src = src;
-          s.onload = ok;
-          s.onerror = fail;
-          document.head.appendChild(s);
-        });
-      }
-
       btn.addEventListener('click', function () {
         if (busy) return;
         busy = true;
@@ -1025,88 +1012,39 @@
           photoReady = Promise.resolve(null);
         }
 
-        function resolveStylesInClone(clonedDoc, original) {
-          var props = ['color','background-color','background','border-color','border-top-color','border-bottom-color','border-left-color','border-right-color','box-shadow','opacity','font-family','font-size','font-weight','line-height','letter-spacing','text-align','text-decoration','text-transform','padding','padding-top','padding-bottom','padding-left','padding-right','margin','margin-top','margin-bottom','margin-left','margin-right','display','flex-direction','align-items','justify-content','gap','grid-template-columns','grid-column','width','height','min-width','min-height','max-width','max-height','position','top','bottom','left','right','z-index','overflow','border-radius','border-width','border-style','white-space','list-style-type','object-fit','content'];
-
-          var origEls = original.querySelectorAll('*');
-          var cloneEls = clonedDoc.querySelectorAll('*');
-          for (var i = 0; i < origEls.length && i < cloneEls.length; i++) {
-            var cs = getComputedStyle(origEls[i]);
-            for (var j = 0; j < props.length; j++) {
-              var v = cs.getPropertyValue(props[j]);
-              if (v) cloneEls[i].style.setProperty(props[j], v);
-            }
-          }
-
-          var rootCs = getComputedStyle(original);
-          for (var j = 0; j < props.length; j++) {
-            var v = rootCs.getPropertyValue(props[j]);
-            if (v) clonedDoc.style.setProperty(props[j], v);
-          }
-
-          var sheets = clonedDoc.styleSheets;
-          for (var s = sheets.length - 1; s >= 0; s--) {
-            try {
-              var sheet = sheets[s];
-              while (sheet.cssRules.length > 0) sheet.deleteRule(0);
-            } catch (e) {}
-          }
-          clonedDoc.querySelectorAll('style').forEach(function (el) { el.remove(); });
-          clonedDoc.querySelectorAll('link[rel="stylesheet"]').forEach(function (el) { el.remove(); });
-
-          var pseudoProps = ['content','color','background-color','background','border-color','border-top-color','border-bottom-color','border-left-color','border-right-color','box-shadow','opacity','font-family','font-size','font-weight','line-height','letter-spacing','text-align','text-decoration','text-transform','padding','padding-top','padding-bottom','padding-left','padding-right','margin','margin-top','margin-bottom','margin-left','margin-right','display','width','height','border-radius','border-width','border-style','white-space','position','top','bottom','left','right','z-index','overflow','list-style-type','object-fit'];
-          for (var i = 0; i < origEls.length && i < cloneEls.length; i++) {
-            ['::before','::after'].forEach(function(pseudo) {
-              try {
-                var cs = getComputedStyle(origEls[i], pseudo);
-                var content = cs.getPropertyValue('content');
-                if (!content || content === 'none' || content === 'normal') return;
-                var el = document.createElement('span');
-                el.style.cssText = 'display:block;margin:0;padding:0;border:none;background:none;';
-                for (var j = 0; j < pseudoProps.length; j++) {
-                  var v = cs.getPropertyValue(pseudoProps[j]);
-                  if (v && v !== 'normal' && v !== 'auto') el.style.setProperty(pseudoProps[j], v);
-                }
-                el.textContent = content.replace(/^["']|["']$/g, '');
-                if (pseudo === '::before') cloneEls[i].prepend(el);
-                else cloneEls[i].appendChild(el);
-              } catch (e) {}
-            });
-          }
-        }
-
         photoReady.then(function (dataUrl) {
           if (dataUrl && photo) photo.setAttribute('src', dataUrl);
           return document.fonts ? document.fonts.ready : Promise.resolve();
         })
         .then(function () {
-          return loadScript(CDN);
+          var styles = [];
+          document.querySelectorAll('link[rel="stylesheet"]').forEach(function (l) {
+            styles.push('<link rel="stylesheet" href="' + l.href + '">');
+          });
+          document.querySelectorAll('style').forEach(function (s) {
+            styles.push('<style>' + s.textContent + '</style>');
+          });
+
+          var win = window.open('', '_blank');
+          if (!win) { throw new Error('Popup blocked'); }
+          win.document.write(
+            '<!DOCTYPE html><html><head><meta charset="utf-8">' +
+            styles.join('') +
+            '<style>@media print{body{margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;}}</style>' +
+            '</head><body>' + doc.outerHTML + '</body></html>'
+          );
+          win.document.close();
+
+          win.onload = function () {
+            setTimeout(function () {
+              win.print();
+              if (origSrc && photo) photo.setAttribute('src', origSrc);
+              busy = false;
+              btn.removeAttribute('data-loading');
+            }, 500);
+          };
         })
-        .then(function () {
-          return html2pdf().from(doc).set({
-            margin: 10,
-            filename: 'Mamadaev_Resume.pdf',
-            image: { type: 'jpeg', quality: 0.95 },
-            html2canvas: {
-              scale: 2,
-              useCORS: true,
-              backgroundColor: '#fff',
-              onclone: function (clonedDoc) {
-                var clonedEl = clonedDoc.querySelector('.resume-doc');
-                if (!clonedEl) return;
-                resolveStylesInClone(clonedDoc, doc);
-              }
-            },
-            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
-          }).save();
-        })
-        .then(function () {
-          if (origSrc && photo) photo.setAttribute('src', origSrc);
-          busy = false;
-          btn.removeAttribute('data-loading');
-        })
-        .catch(function (e) {
-          console.error('[PDF] error:', e.message || e, e.stack || '');
+        .catch(function () {
           if (origSrc && photo) photo.setAttribute('src', origSrc);
           busy = false;
           btn.removeAttribute('data-loading');
diff --git a/src/pages/resume-5.html b/src/pages/resume-5.html
index 6277905..de48e70 100644
--- a/src/pages/resume-5.html
+++ b/src/pages/resume-5.html
@@ -842,23 +842,10 @@
     <script>
     (function () {
       var btn = document.querySelector('[data-resume-pdf-btn]');
-      console.log('[PDF] btn found:', !!btn);
       if (!btn) return;
 
-      var CDN = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.2/html2pdf.bundle.min.js';
       var busy = false;
 
-      function loadScript(src) {
-        return new Promise(function (ok, fail) {
-          if (window.html2pdf) { ok(); return; }
-          var s = document.createElement('script');
-          s.src = src;
-          s.onload = ok;
-          s.onerror = fail;
-          document.head.appendChild(s);
-        });
-      }
-
       btn.addEventListener('click', function () {
         if (busy) return;
         busy = true;
@@ -894,88 +881,39 @@
           photoReady = Promise.resolve(null);
         }
 
-        function resolveStylesInClone(clonedDoc, original) {
-          var props = ['color','background-color','background','border-color','border-top-color','border-bottom-color','border-left-color','border-right-color','box-shadow','opacity','font-family','font-size','font-weight','line-height','letter-spacing','text-align','text-decoration','text-transform','padding','padding-top','padding-bottom','padding-left','padding-right','margin','margin-top','margin-bottom','margin-left','margin-right','display','flex-direction','align-items','justify-content','gap','grid-template-columns','grid-column','width','height','min-width','min-height','max-width','max-height','position','top','bottom','left','right','z-index','overflow','border-radius','border-width','border-style','white-space','list-style-type','object-fit','content'];
-
-          var origEls = original.querySelectorAll('*');
-          var cloneEls = clonedDoc.querySelectorAll('*');
-          for (var i = 0; i < origEls.length && i < cloneEls.length; i++) {
-            var cs = getComputedStyle(origEls[i]);
-            for (var j = 0; j < props.length; j++) {
-              var v = cs.getPropertyValue(props[j]);
-              if (v) cloneEls[i].style.setProperty(props[j], v);
-            }
-          }
-
-          var rootCs = getComputedStyle(original);
-          for (var j = 0; j < props.length; j++) {
-            var v = rootCs.getPropertyValue(props[j]);
-            if (v) clonedDoc.style.setProperty(props[j], v);
-          }
-
-          var sheets = clonedDoc.styleSheets;
-          for (var s = sheets.length - 1; s >= 0; s--) {
-            try {
-              var sheet = sheets[s];
-              while (sheet.cssRules.length > 0) sheet.deleteRule(0);
-            } catch (e) {}
-          }
-          clonedDoc.querySelectorAll('style').forEach(function (el) { el.remove(); });
-          clonedDoc.querySelectorAll('link[rel="stylesheet"]').forEach(function (el) { el.remove(); });
-
-          var pseudoProps = ['content','color','background-color','background','border-color','border-top-color','border-bottom-color','border-left-color','border-right-color','box-shadow','opacity','font-family','font-size','font-weight','line-height','letter-spacing','text-align','text-decoration','text-transform','padding','padding-top','padding-bottom','padding-left','padding-right','margin','margin-top','margin-bottom','margin-left','margin-right','display','width','height','border-radius','border-width','border-style','white-space','position','top','bottom','left','right','z-index','overflow','list-style-type','object-fit'];
-          for (var i = 0; i < origEls.length && i < cloneEls.length; i++) {
-            ['::before','::after'].forEach(function(pseudo) {
-              try {
-                var cs = getComputedStyle(origEls[i], pseudo);
-                var content = cs.getPropertyValue('content');
-                if (!content || content === 'none' || content === 'normal') return;
-                var el = document.createElement('span');
-                el.style.cssText = 'display:block;margin:0;padding:0;border:none;background:none;';
-                for (var j = 0; j < pseudoProps.length; j++) {
-                  var v = cs.getPropertyValue(pseudoProps[j]);
-                  if (v && v !== 'normal' && v !== 'auto') el.style.setProperty(pseudoProps[j], v);
-                }
-                el.textContent = content.replace(/^["']|["']$/g, '');
-                if (pseudo === '::before') cloneEls[i].prepend(el);
-                else cloneEls[i].appendChild(el);
-              } catch (e) {}
-            });
-          }
-        }
-
         photoReady.then(function (dataUrl) {
           if (dataUrl && photo) photo.setAttribute('src', dataUrl);
           return document.fonts ? document.fonts.ready : Promise.resolve();
         })
         .then(function () {
-          return loadScript(CDN);
+          var styles = [];
+          document.querySelectorAll('link[rel="stylesheet"]').forEach(function (l) {
+            styles.push('<link rel="stylesheet" href="' + l.href + '">');
+          });
+          document.querySelectorAll('style').forEach(function (s) {
+            styles.push('<style>' + s.textContent + '</style>');
+          });
+
+          var win = window.open('', '_blank');
+          if (!win) { throw new Error('Popup blocked'); }
+          win.document.write(
+            '<!DOCTYPE html><html><head><meta charset="utf-8">' +
+            styles.join('') +
+            '<style>@media print{body{margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;}}</style>' +
+            '</head><body>' + doc.outerHTML + '</body></html>'
+          );
+          win.document.close();
+
+          win.onload = function () {
+            setTimeout(function () {
+              win.print();
+              if (origSrc && photo) photo.setAttribute('src', origSrc);
+              busy = false;
+              btn.removeAttribute('data-loading');
+            }, 500);
+          };
         })
-        .then(function () {
-          return html2pdf().from(doc).set({
-            margin: 10,
-            filename: 'Mamadaev_Resume.pdf',
-            image: { type: 'jpeg', quality: 0.95 },
-            html2canvas: {
-              scale: 2,
-              useCORS: true,
-              backgroundColor: '#fff',
-              onclone: function (clonedDoc) {
-                var clonedEl = clonedDoc.querySelector('.resume-doc');
-                if (!clonedEl) return;
-                resolveStylesInClone(clonedDoc, doc);
-              }
-            },
-            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
-          }).save();
-        })
-        .then(function () {
-          if (origSrc && photo) photo.setAttribute('src', origSrc);
-          busy = false;
-          btn.removeAttribute('data-loading');
-        })
-        .catch(function (e) {
-          console.error('[PDF] error:', e.message || e, e.stack || '');
+        .catch(function () {
           if (origSrc && photo) photo.setAttribute('src', origSrc);
           busy = false;
           btn.removeAttribute('data-loading');