vue3 前端点击 按钮 ,调用后端接口,获取对应数据,将数据以pdf格式打印出来

在Vue 3中实现前端点击按钮调用后端接口获取数据，并将数据以PDF格式打印出来，可以分为几个步骤：

1. 创建一个按钮，并为其绑定点击事件处理函数。
2. 在点击事件处理函数中，使用Ajax或其他HTTP客户端（如axios）发起对后端接口的请求。
3. 接收后端返回的数据，并使用一个库（如jsPDF）来生成PDF文件。
4. 将生成的PDF文件提供给用户下载或直接打印。

下面是一个简单的示例代码：

<template>
  <button @click="fetchDataAndGeneratePDF">生成PDF</button>
</template>

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

export default {
  methods: {
    fetchDataAndGeneratePDF() {
      axios.get('/api/data') // 假设后端接口为/api/data
        .then(response => {
          const data = response.data;
          const pdf = new jsPDF();
          // 这里假设data是一个包含必要信息的对象，可以根据需要生成PDF内容
          pdf.text('标题', 10, 10);
          pdf.text(`内容: ${data.content}`, 10, 20);
          // 生成PDF后提供下载或打印选项
          pdf.save('document.pdf');
          // 或者
          // window.open(pdf.output('bloburl'));
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>

在这个示例中，我们首先在模板中添加了一个按钮，并为其绑定了点击事件。当按钮被点击时，`fetchDataAndGeneratePDF`方法会被触发。这个方法通过axios发起GET请求到后端接口，并在成功获取数据后使用jsPDF库来生成PDF文件。最后，通过调用`pdf.save('document.pdf')`实现将PDF文件保存到用户本地，或者使用`window.open(pdf.output('bloburl'))`来在新窗口中打开PDF文档供用户打印。