时间戳

首页 > 解决方案 > 如何使用 preact-cli + jspdf 进行构建

jspdf - 如何使用 preact-cli + jspdf 进行构建

问题描述

我正在尝试将带有jspdf的 pdf 文件保存在preact -cli样板文件中。我正常开始我的项目：

npx preact-cli create <template-name> <app-name>

之后npm install --save jspdf，我使用此代码保存文件（捆绑到一个按钮）：

import { jsPDF } from "jspdf";


const geraPdf = (props) => {
    const doc = new jsPDF();

    doc.text("Hello world! " + props, 10, 10);
    doc.save("a4.pdf");

}

export default geraPdf

当我在开发服务器（npm run dev）上运行它时，它工作正常。但我无法将其构建到生产环境中（npm run build）

这是我的错误：

错误模板执行失败：类型错误：无法读取未定义的属性“绑定”×错误类型错误：无法读取未定义的属性“绑定”

  • ssr-bundle.js:5474 Object.6PsS XXXXXXXXXXXXXXXXXXXXXXXX/build/ssr-build/ssr-bundle.js:5474:39

  • ssr-bundle.js:27 webpack_require XXXXXXXXXXXXXXXXXXXXXXXX/ANPP/build/ssr-build/ssr-bundle.js:27:30

  • ssr-bundle.js:2661 Object./jyc XXXXXXXXXXXXXXXXXXXXXXXX/ANPP/build/ssr-build/ssr-bundle.js:2661:16

  • ssr-bundle.js:27 webpack_require XXXXXXXXXXXXXXXXXXXXXXXX/ANPP/build/ssr-build/ssr-bundle.js:27:30

  • ssr-bundle.js:92 XXXXXXXXXXXXXXXXXXXXXXXX/build/ssr-build/ssr-bundle.js:92:18

  • ssr-bundle.js:95 对象。XXXXXXXXXXXXXXXXXXXXXXXX/build/ssr-build/ssr-bundle.js:95:10

  • loader.js:1200 Module._compile internal/modules/cjs/loader.js:1200:30

  • loader.js:1220 Object.Module._extensions..js 内部/modules/cjs/loader.js:1220:10

  • loader.js:1049 Module.load 内部/modules/cjs/loader.js:1049:32

  • loader.js:937 Function.Module._load internal/modules/cjs/loader.js:937:14

  • loader.js:1089 Module.require 内部/模块/cjs/loader.js:1089:19

  • helpers.js:73 需要内部/模块/cjs/helpers.js:73:18

  • prerender.js:32 预渲染 [XXXX]/[preact-cli]/lib/lib/webpack/prerender.js:32:11

  • render-html-plugin.js:37 Object.ssr [XXXX]/[preact-cli]/lib/lib/webpack/render-html-plugin.js:37:55

  • template.html:110 t41+.module.exports [XXXX]/[preact-cli]/lib/resources/template.html:110:37

  • index.js:264 [XXXX]/[html-webpack-plugin]/index.js:264:16

查看 JSPDF，他们建议使用自定义 webpack 配置：

// webpack.config.js
module.exports = {
  // ...
  externals: {
    // only define the dependencies you are NOT using as externals!
    canvg: "canvg",
    html2canvas: "html2canvas",
    dompurify: "dompurify"
  }
};

Preact-CLI 使用自定义的 webpack 配置。您应该创建一个名为 preact.config.js 的文件来对 webpack 进行更改，但我现在知道如何在 preact 文件上实现它，而且我不知道它是否会起作用。

有好心人帮帮我吗？

标签： jspdfpreactpreact-cli

解决方案

推荐阅读