Export to PDF does NOT export a PDF but created a *.pdf file with HTML content

ghost commented 2 years ago

I tried this tool on my machine, but it did not work. After editing the resume the preview works fine, but as soon as I click the export to pdf button a 4 kb pdf file gets generated.

This file contains this (a 404 page?):

<!DOCTYPE html>
<html>
   <head>
      <style data-next-hide-fouc="true">body{display:none}</style>
      <noscript data-next-hide-fouc="true">
         <style>body{display:block}</style>
      </noscript>
      <meta name="viewport" content="width=device-width"/>
      <meta charSet="utf-8"/>
      <meta name="description" content="A modern real time design and 100% free resume builder."/>
      <title>404 Not Found | wtfresume</title>
      <meta name="next-head-count" content="4"/>
      <noscript data-n-css=""></noscript>
      <link rel="preload" href="/_next/static/chunks/webpack.js?ts=1637675065916" as="script"/>
      <link rel="preload" href="/_next/static/chunks/main.js?ts=1637675065916" as="script"/>
      <link rel="preload" href="/_next/static/chunks/pages/_app.js?ts=1637675065916" as="script"/>
      <link rel="preload" href="/_next/static/chunks/pages/404.js?ts=1637675065916" as="script"/>
      <noscript id="__next_css__DO_NOT_USE__"></noscript>
      <style data-styled="" data-styled-version="5.0.1"></style>
   </head>
   <body>
      <div id="__next">
         <div class="style_errPage__352u_">
            <nav class="style_nav__1pf5V navbar navbar-expand-sm navbar-light">
               <section class="container">
                  <a href="/"><img src="/images/logo1.png" alt="wtfresume logo (resume builder)" class="style_logo__2G-p5"/></a><button aria-controls="basic-navbar-nav" type="button" aria-label="Toggle navigation" class="style_navbarNav__R3W3Z navbar-toggler collapsed"><i class="material-icons">menu</i></button>
                  <div class="navbar-collapse collapse" id="basic-navbar-nav">
                     <div class="ml-auto navbar-nav">
                        <div class="style_navItem__1F9N6"><a href="/resume-builder">Create My Resume</a></div>
                        <div class="style_navItem__1F9N6">EN</div>
                        <div class="style_navItem__1F9N6"><a href="https://github.com/sramezani/resume-builder" target="_blank" rel="noopener noreferrer">github</a></div>
                     </div>
                  </div>
               </section>
            </nav>
            <div class="container">
               <div class="style_insideErr__3Nyw4">
                  <h1>404 | Page Not Found</h1>
                  <a href="/">Home Page</a>
               </div>
            </div>
            <footer class="footer_footer__BhvTc">
               <div class="container">
                  <div class="row footer_footerNav__1TpHz">
                     <div class="col-md-4"><a href="/"><img src="/images/logo1.png" alt="wtfresume logo (resume builder)" class="footer_logo__WOOfB"/></a></div>
                     <div class="col-md-4">
                        <ul>
                           <li class="footer_footerNavTitle__1H7Ml">PAGES</li>
                           <li><a href="/resume-builder">Resume Builder</a></li>
                           <li>EN</li>
                        </ul>
                     </div>
                     <div class="col-md-4">
                        <ul>
                           <li class="footer_footerNavTitle__1H7Ml">LINKS</li>
                           <li><a href="https://github.com/sramezani/resume-builder" target="_blank" rel="noopener noreferrer">github</a></li>
                           <li></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="footer_footerCopyright__2silO">wtfresume</div>
            </footer>
         </div>
         <div class="Toastify"></div>
      </div>
      <script src="/_next/static/chunks/react-refresh.js?ts=1637675065916"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{},"initialReduxState":{"userData":{"name":"","address":"","email":"","mobile":"","userData":"","profile":"","infoTitle":"Personal info","profileTitle":"Profile","workExperienceTitle":"Work experience","educationTitle":"Education","skillsTitle":"Skills","photo":"images/nobody.jpg"},"workExperience":[{"id":"1"}],"education":[{"id":"1"}],"skills":[{"id":"1"}],"theme":{"color":"#03A9F4","fontFamily":"Source Sans Pro"},"itemStatus":{"picture":false,"info":true,"profile":true,"workExperience":true,"education":true,"skills":true}}},"page":"/404","query":{},"buildId":"development","isFallback":false,"appGip":true}</script><script nomodule="" src="/_next/static/chunks/polyfills.js?ts=1637675065916"></script><script src="/_next/static/chunks/webpack.js?ts=1637675065916"></script><script src="/_next/static/chunks/main.js?ts=1637675065916"></script><script src="/_next/static/chunks/pages/_app.js?ts=1637675065916"></script><script src="/_next/static/chunks/pages/404.js?ts=1637675065916"></script><script src="/_next/static/development/_buildManifest.js?ts=1637675065916"></script><script src="/_next/static/development/_ssgManifest.js?ts=1637675065916"></script>
   </body>
</html>

OS: Win 10 Node Version: v14.17.6

ghost commented 2 years ago

I've tested it on a machine with Node Version v16.13.0, too and it doesn't work there as well.

abdullahIsa commented 1 year ago

Same here too, any solution ?

abdullahIsa commented 1 year ago

update for those that might come across this, just do ur edits and then head here http://localhost:3000/preview?export=true&data=1 then right click and click print or if you want the way author did it use puppeteer.

 const generatePDF = async () => {
            const browser = await puppeteer.launch();
            const page = await browser.newPage();
            await page.goto(`https://wtfresume-sramezani.vercel.app/preview?export=true&data=${uuid}`, {
                waitUntil: 'networkidle2',
              });
            await page.emulateMedia('screen');
            await page.content()
            const pdf = await page.pdf({
                // path: `./pdf/${uuid}.pdf`,
                printBackground: true,
                format: 'A4',
                width: '210mm',
                height: '297mm',
            });
            await browser.close();

            res.contentType("application/pdf");
            res.send(pdf);
}

sramezani / resume-builder

Export to PDF does NOT export a PDF but created a *.pdf file with HTML content #20