ReferenceError：nextjs 中未定义 self

Question

我正在努力在 next.js 项目中将 html 下载为 pdf。 所以，我使用了 html2pdf.js 包。 这是我的代码。

import html2pdf from 'html2pdf.js';
import ReactDOMServer from 'react-dom/server';

const pdfJSX = () => {
        return (
          <>
            <h1 className='text-[red] text-[40px] font-strawford'>JSX to PDF Convert Example</h1>
            <img src='/new-b2c/onboarding/image.png' className='w-[50px] h-[50px]'/>
            <h2>Hello React</h2> 
          </>
        )
    }

    const handleConvertToPdf = async () => {
        const printElement = ReactDOMServer.renderToString(pdfJSX());

        var opt = {
          margin: 0.5,
          filename: 'myfile.pdf',
          image: { type: 'png', quality: 1 },
        //   html2canvas: { scale: 2 },
          jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' },
        };       

        html2pdf().set(opt).from(printElement).save();        
    };

但是我在这里遇到了这样的错误。 “ReferenceError：自我未定义”。

图片说明

我尝试了多种方法来解决这个问题。 但我无法解决这个错误。

我认为，这部分有问题。

html2pdf().set(opt).from(printElement).save();   

那么，我该如何解决这个问题呢？

Answer 1

import html2pdf from 'html2pdf.js';
import ReactDOMServer from 'react-dom/server';

// If this is a react component in a nextJS route you need a component to be a default export

export default const pdfJSX = () => {
        return (
          <>
            <h1 className='text-[red] text-[40px] font-strawford'>JSX to PDF Convert Example</h1>
            <img src='/new-b2c/onboarding/image.png' className='w-[50px] h-[50px]'/>
            <h2>Hello React</h2> 
          </>
        )
    }

    const handleConvertToPdf = async () => {
        const printElement = ReactDOMServer.renderToString(pdfJSX());

        var opt = {
          margin: 0.5,
          filename: 'myfile.pdf',
          image: { type: 'png', quality: 1 },
        //   html2canvas: { scale: 2 },
          jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' },
        };       

        html2pdf().set(opt).from(printElement).save();        
    };