如何用Javascript将textarea内容保存为PDF？遇报错求助

核心错误分析 #

你当前的报错来自三个问题：

1. 引入了不存在的@babel/runtime文件，这个依赖完全多余，直接删除即可
2. scripts.js使用了模块导入语法，但未给对应的script标签声明type="module"，浏览器默认不支持
3. 本地引入jsPDF的ES模块版本时，路径和依赖处理复杂，容易出问题

最简单的解决方案：用CDN全局引入jsPDF #

这种方式无需安装本地依赖，直接用UMD版本的jsPDF，避免模块语法问题，步骤如下：

修正后的HTML代码

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/CSS" href="styles.css">
        <!-- 引入CDN的UMD版jsPDF，全局可用 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    </head>
    <body>
        <div class="screenplay-container">
            <textarea class="screenplay-text" id="screenplay-text"></textarea>
            <button id="save-button">Save as PDF</button>
        </div>

        <script type="text/javascript" src="scripts.js"></script>
    </body>
</html>

修正后的JavaScript代码

// UMD版本的jsPDF会在window上暴露jspdf对象，从中取出jsPDF类
const { jsPDF } = window.jspdf;

const saveButton = document.getElementById('save-button');

saveButton.addEventListener('click', () => {
  const doc = new jsPDF();
  const screenplayText = document.getElementById('screenplay-text').value;
  // 处理textarea中的多行文本，自动拆分适配PDF页面宽度
  const splitText = doc.splitTextToSize(screenplayText, 190); // 190为页面内容区域宽度（A4纸宽度210，左右各留10边距）
  doc.text(splitText, 10, 10);
  doc.save('screenplay.pdf');
});

本地模块方案（适合需要离线开发的场景） #

如果坚持用本地安装的jsPDF，按以下步骤操作：

1. 先通过npm安装依赖：

npm install jspdf

2. 修正HTML代码（给script标签加type="module"）：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/CSS" href="styles.css">
    </head>
    <body>
        <div class="screenplay-container">
            <textarea class="screenplay-text" id="screenplay-text"></textarea>
            <button id="save-button">Save as PDF</button>
        </div>

        <!-- 声明为模块脚本 -->
        <script type="module" src="scripts.js"></script>
    </body>
</html>

3. 修正JavaScript代码：

// 从本地node_modules导入jsPDF
import jsPDF from 'jspdf';

const saveButton = document.getElementById('save-button');

saveButton.addEventListener('click', () => {
  const doc = new jsPDF();
  const screenplayText = document.getElementById('screenplay-text').value;
  const splitText = doc.splitTextToSize(screenplayText, 190);
  doc.text(splitText, 10, 10);
  doc.save('screenplay.pdf');
});

注意：本地模块方案必须用支持ES模块的本地服务器运行（比如npx live-server或Vite），不能直接双击打开HTML文件。

额外说明 #

• 加入splitTextToSize是为了处理textarea中的换行和长文本，否则PDF中只会显示一行内容
• 不需要引入任何babel相关依赖，你的场景完全用不到

内容的提问来源于stack exchange，提问作者liamoriley