【山东大学项目实训】生成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

1. 生成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生成成功了