uni-app 生成pdf

在 Uni-app 中生成 PDF 文件，你可以使用 html2canvas 和 jspdf 这两个库来实现。html2canvas 可以将 HTML 元素渲染成画布（canvas），而 jspdf 则可以将画布内容导出为 PDF 文件。下面是一个简单的示例代码，展示如何在 Uni-app 中实现这一功能。

首先，你需要安装这两个库。在 Uni-app 项目的根目录下运行以下命令：

npm install html2canvas jspdf

然后，在你的页面或组件中引入这两个库，并编写生成 PDF 的逻辑。以下是一个完整的示例代码：

<template>
  <view>
    <view id="content" style="width: 210mm; height: 297mm; background: #fff;">
      <!-- 这里放置你想要导出为 PDF 的内容 -->
      <text>Hello, this is a PDF content!</text>
    </view>
    <button @click="generatePDF">Generate PDF</button>
  </view>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    generatePDF() {
      const content = document.getElementById('content');
      html2canvas(content).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF('p', 'mm', 'a4');
        const imgWidth = 210; // PDF 宽度
        const imgHeight = (canvas.height * imgWidth) / canvas.width; // 保持图片宽高比

        pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
        pdf.save('generated.pdf');
      }).catch(err => {
        console.error(err);
      });
    }
  }
}
</script>

<style scoped>
/* 根据需要调整样式 */
</style>

在这个示例中，我们首先定义了一个 view 元素作为要导出为 PDF 的内容容器，并给它设置了一个固定的宽度和高度（A4 纸的大小）。然后，我们添加了一个按钮，点击按钮时会调用 generatePDF 方法。

在 generatePDF 方法中，我们使用 html2canvas 将 #content 元素渲染成一个画布，并将画布转换为 PNG 格式的图像数据。接着，我们使用 jspdf 创建一个新的 PDF 文档，并将图像数据添加到 PDF 中。最后，我们调用 pdf.save 方法将 PDF 文件保存到本地。

请注意，由于 Uni-app 是一个跨平台框架，这段代码在 H5 平台上可以直接运行，但在小程序或 App 平台上可能需要额外的适配工作。特别是文件保存功能，在小程序或 App 中可能需要使用平台提供的文件保存 API。