PPT 全方位辅助系统——生成PPT前后端连接

本功能的主要逻辑为：

在大纲页面（outline）和挑选模板生成PPT页面（template）之间实现带参数的页面跳转，将PPT文本内容传到模板生成PPT页面（template）；

在模板生成PPT页面（template）点击对应图片选择自己喜欢的PPT模板时，前端可以将参数传给后端，后端使用对应的模板生成PPT。

关键代码：

1.传参：

// 在这里进行页面跳转
        this.$router.push({
      path: '/template',
      query: {
        content: this.outline
      }

接收：

this.$route.query.content

生成PPT：

<img v-if="imageGenerated" src="@/assets/ppt1.png" alt="生成的PPT" class="image00" @click="generatePPT('content')">
    async generatePPT(content) {
      const requestData = {
        content: this.$route.query.content,
        //outline: this.outline
      };
      console.log('Request data:', requestData);
      try {
        const response = await axios.post('http://localhost:8080/ppt/createPpt1', requestData, {
          responseType: 'blob' // 确保 axios 将响应处理为 Blob 对象
        });
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'generated_ppt.pptx';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        alert('PPT 生成成功！');
        console.log('Response:', response);
      } catch (error) {
        console.error('生成 PPT 时出错:', error);

        if (error.response) {
          console.error('Response data:', error.response.data);
          console.error('Response status:', error.response.status);
          console.error('Response headers:', error.response.headers);
        } else if (error.request) {
          console.error('Request data:', error.request);
        } else {
          console.error('Error message:', error.message);
        }
        alert('生成 PPT 时出错');
      }
    },

页面展示：

可以看到PPT生成成功了