项目-02-数学学院后台项目开发过程中的问题总结

🕗 发布于 2024-12-05 18:21 vue

一、后台（pc端，vue2）

1. dialog对话框被黑色蒙层盖住

问题： dialog被黑色蒙层盖住（如下图），我希望dialog背景是黑色蒙层，但是dialog对话框不被盖住
在这里插入图片描述
解决办法： 给el-dialog添加如下两个属性

    <el-dialog 
      :modal-append-to-body="false" 
      :append-to-body="true">

添加后效果如下：
在这里插入图片描述

2. 将前端表格导出为word文档

需求：

前端独立完成
将审批通过的数据，按照班级分类打印出通过人员名单
word文档的名字可以指定（前端人员传参决定），例如传参为“入团积极分子审查表”
word文档的内容标题为动态的，是各期活动名字，例如“入团申请第十一期”
word文档的后缀为.docx

效果图如下：

在这里插入图片描述

解决方法：
一. 参考文档

二. 具体方法

安装第三方包：

vue3下载包参考版本

"dependencies": {
    "angular-expressions": "^1.2.1",
    "docx-preview": "^0.3.2",
    "docxtemplater": "^3.49.1",
    "docxtemplater-image-module-free": "^1.1.1",
    "file-saver": "^2.0.5",
    "lodash": "^4.17.21",
    "pizzip": "^3.1.7",
  },

vue2下载包参考版本（docx-preview版本过高可能会报错）

"dependencies": {
    "angular-expressions": "^1.2.1",
    "docx-preview": "^0.1.20",
    "docxtemplater": "^3.49.1",
    "docxtemplater-image-module-free": "^1.1.1",
    "file-saver": "^2.0.5",
    "lodash": "^4.17.21",
    "pizzip": "^3.1.7",
  },

根据自己的需求，创建word文档，我创建的word文档如下：（具体书写规则参考vue3实现包含表格的Word文件导出里的解释）

在这里插入图片描述

编写导出Word的工具函数（我在utils文件夹下创建了exportFile.js文件）

注意：

下面代码是完整版代码（包括word的导出和预览，导出功能包括支持图片导出和不支持图片导出）
由于我只需要 “导出word，不支持图片” 的功能，所以最后只使用了下列代码中的exportWord函数，大家用的时候可以根据需要填写

// 编写导出word的工具函数

// 引入基本模块
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";
// 图片模块
import ImageModule from "docxtemplater-image-module-free";
// 解析语法模块
import expressions from "angular-expressions";
import assign from "lodash/assign";
// 文档预览模块
import { renderAsync } from "docx-preview";

expressions.filters.lower = function (input) {
  if (!input) return input;
  return input.toLowerCase();
};

function angularParser(tag) {
  tag = tag
    .replace(/^\.$/, "this")
    .replace(/('|')/g, "'")
    .replace(/("|")/g, '"');
  const expr = expressions.compile(tag);
  return {
    get: function (scope, context) {
      let obj = {};
      const scopeList = context.scopeList;
      const num = context.num;
      for (let i = 0, len = num + 1; i < len; i++) {
        obj = assign(obj, scopeList[i]);
      }
      return expr(scope, obj);
    },
  };
}

// 加载文件
function loadFile(url, callback) {
  PizZipUtils.getBinaryContent(url, callback);
}

// 配置空值替换函数 作为配置参数可配置在setOptions中
function nullGetter(part, scopeManager) {
  if (!part.module) {
    return "-null-";
  }
  if (part.module === "rawxml") {
    return "";
  }
  return "--";
}

/**
 * 预览word,支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 * @param {Arrsy} imgSize 自定义图片尺寸
 */
export const getWordImage = (tempDocxPath, wordData, imgSize, file) => {
  loadFile(tempDocxPath, (error, content) => {
    if (error) {
      throw error;
    }

    // 图片配置
    const imageOpts = {
      getImage: function (tagValue, tagName) {
        return new Promise(function (resolve, reject) {
          PizZipUtils.getBinaryContent(tagValue, function (error, content) {
            if (error) {
              return reject(error);
            }
            return resolve(content);
          });
        });
      },
      getSize: function (img, tagValue, tagName) {
        const size = imgSize[tagName] ? imgSize[tagName] : [150, 150];
        return size;
      },
    };

    let imageModule = new ImageModule(imageOpts);

    const zip = new PizZip(content);

    // 实例化有两种方式 这里是链式
    const doc = new Docxtemplater()
      .loadZip(zip)
      .setOptions({
        // delimiters: { start: "[[", end: "]]" },
        paragraphLoop: true,
        linebreaks: true,
        nullGetter: nullGetter,
        parser: angularParser,
      })
      .attachModule(imageModule)
      .compile();

    doc.renderAsync(wordData).then(() => {
      const out = doc.getZip().generate({
        type: "blob",
        mimeType:
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      renderAsync(out, file);
    });
  });
};



/**
 * 导出word,不支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 */
export const exportWord = (tempDocxPath, wordData, fileName) => {
  loadFile(tempDocxPath, (error, content) => {
    if (error) {
      throw error;
    }
    const zip = new PizZip(content);
    const doc = new Docxtemplater().loadZip(zip)
    doc.setData({
      ...wordData.form,
      user_list: wordData.user_list,
      outsideList: wordData.outsideList
    })

    try {
      doc.render()
    } catch (error) {
      const e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      }
      throw error
    }

    const out = doc.getZip().generate({
      type: "blob",
      mimeType:
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    });
    // Output the document using Data-URI
    saveAs(out, `${fileName}.docx`);
  });
}

/**
 * 导出word,支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 * @param {Arrsy} imgSize 自定义图片尺寸
 */
export const exportWordImage = (tempDocxPath, wordData, fileName, imgSize) => {
  loadFile(tempDocxPath, (error, content) => {
    if (error) {
      throw error;
    }

    // 图片配置
    const imageOpts = {
      getImage: function (tagValue, tagName) {
        return new Promise(function (resolve, reject) {
          PizZipUtils.getBinaryContent(tagValue, function (error, content) {
            if (error) {
              return reject(error);
            }
            return resolve(content);
          });
        });
      },
      getSize: function (img, tagValue, tagName) {
        const size = imgSize[tagName] ? imgSize[tagName] : [150, 150]
        return size;
      },
    };

    let imageModule = new ImageModule(imageOpts);

    const zip = new PizZip(content);

    // 实例化有两种方式 这里是链式
    const doc = new Docxtemplater()
      .loadZip(zip)
      .setOptions({
        // delimiters: { start: "[[", end: "]]" },
        paragraphLoop: true,
        linebreaks: true,
        nullGetter: nullGetter,
        parser: angularParser,
      })
      .attachModule(imageModule)
      .compile();

    doc.renderAsync(wordData).then(function () {
      const out = doc.getZip().generate({
        type: "blob",
        mimeType:
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      saveAs(out, `${fileName}.docx`);
    });
  });
}

vue页面使用

import { exportWord } from '../../utils/exportFile';

export default {
data() {
return {
activity_name: '入团积极分子第十一期',
filename: '入团积极分子审查表'
}
},
methods: {
exportTable() {
// 需要导出的所有数据都需要写在wordData里面
// 因为我们写的exportWord工具函数只接受三个参数，第一个是模版文件路径，第二个是导出数据，第三个是表的名称
// 当然，大家也可以根据需要修改../../utils/exportFile里面的函数
let wordData = { 
form: {
activity_name: this.activity_name // 活动名称
},
outsideList: [ // 要导出的班级人员名单数据
      {
        user_class: '计科211',
        user_list: [
          { name: '袁云熙'},
          { name: '莫睿'}
        ]
      },
      {
        user_class: '数本221',
        user_list: [
          { name: '向致远'}
        ]
      }
    ]
}
exportWord("../../../static/template.docx", wordData, this.filename)
}
}
}

3. 在线查看、下载 .docx、.doc、.pdf文档

需求：

前端独立完成
后端返回的是文件地址，例如：
点击“查看”按钮，在新窗口打开并查看文档内容
点击“下载”按钮，可以下载对应的文档
点击“一键导出”，可以下载全部的文档

参考文档：

纯前端vue在线预览编辑Office，支持doc/docx、xls/xlsx、ptt/pttx、pdf等格式

解决方案：

<div class="top">
  <el-button @click="downAllfile" style="padding: 3px 0" type="text">一键导出</el-button>
</div>

<el-table :data="wordPdfData" border>
    <el-table-column label="操作" align="center" width="250">
      <template #default="{ row }">
        <span class="check">
          <a :href="getFileExtension(row.file_name) === 'pdf' ? `${row.file_path}` : `https://view.officeapps.live.com/op/view.aspx?src=${row.file_path}`" target="_blank">查看</a>
        </span>
        <span class="download">
          <a @click="downFile(row.file_path, row.file_name)">下载</a>
        </span>
      </template>
    </el-table-column>
</el-table>

export default {
data() {
return {
wordPdfData: []
}
},
methods: {
// 获取文件后缀名
    getFileExtension(filename) {
      return filename.split('.').pop().toLowerCase()
    },
    // 下载文件
    downFile(url, filename) { // url：文件地址，filename：文件名称
      return new Promise((resolve, reject) => {
        // 创建一个隐藏的<a>元素用于触发下载
        const a = document.createElement("a");
        
        // 使用fetch API下载文件
        fetch(url)
          .then(res => {
            // 检查网络响应是否成功
            if (!res.ok) {
              // 如果响应不成功，则抛出一个错误
              throw new Error(`网络响应失败，状态码：${res.status}`);
            }
            // 如果响应成功，则返回Blob对象
            return res.blob();
          })
          .then(blob => {
            // 创建一个对象URL用于下载
            const objectURL = URL.createObjectURL(blob);
            a.href = objectURL;
            a.download = filename; // 设置下载的文件名
            a.style.display = 'none'; // 隐藏<a>元素
            document.body.appendChild(a); // 将<a>元素添加到文档中
            a.click(); // 触发下载
            
            // 使用setTimeout在下一轮事件循环中释放对象URL并移除<a>元素
            // 同时解析Promise表示下载成功
            setTimeout(() => {
              URL.revokeObjectURL(objectURL);
              document.body.removeChild(a);
              resolve(); // 下载成功，解析Promise
            }, 0);
          })
          .catch(error => {
            // 如果在下载过程中发生错误，则拒绝Promise
            reject(error); // 下载失败，拒绝Promise
          });
      });
    },
    // 批量下载文件
    downAllfile() {
      let downList = this.wordPdfData

      const downloadPromises = downList.map(item => {
        const downloadUrl = item.file_path; // 构造下载URL
        return new Promise((resolve, reject) => {
          // 调用downImage方法下载图片，并在下载完成后解析或拒绝Promise
          this.downFile(downloadUrl, item.file_name)
            .then(() => resolve()) 
            .catch(error => reject(error)); 
        });
      })
 
      // 使用Promise.all等待所有下载任务完成
      Promise.all(downloadPromises)
        .then(() => {
          // 所有文件都已成功下载
          this.$message({
            type: 'success',
            message: '所有导出成功！',
            showClose: true,
            duration: 3000
          });
        })
        .catch(error => {
          // 至少有一个文件下载失败
          console.error('至少有一个文件下载失败:', error);
          this.$message({
            type: 'error',
            message: '导出失败，请重试。',
            showClose: true,
            duration: 3000
          });
        });
    }    
}
}

原文地址：https://blog.csdn.net/m0_64150479/article/details/144249514

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：后端返回前端的数据量过大解决方案
下一篇：牛客面经学习【2024/12/1】

迅为瑞芯微RK3562开发板/核心板应用于人脸跟踪、身体跟踪、视频监控、自动语音识别(ASR)、图像分类驾驶员辅助系统(ADAS)、车牌识别、物体识别等
iTOP-3562开发板/核心板采用瑞芯微RK3562处理器，内部集成了四核A53+Mali G52架构，主频2GHZ，内置1TOPSNPU算力，RK809动态调频。支持几乎全格式的H.264解码，支
阅读更多2024-12-31
低精度只适用于未充分训练的LLM？腾讯提出LLM量化的scaling laws
尽管有一些研究声称原生的低比特LLM可以媲美fp16/bf16精度下的表现，但这些研究普遍都是在未充分语言模型上得到的结果从而推出的结论，研究人员认为在充分训练的情况下进行比较的话，低比特LLM也将很
阅读更多2024-12-31
医疗数仓配置Flume
Flume需要将Kafka中各topic的数据传输到HDFS，因此选用KafkaSource以及HDFSSink。对于安全性要求高的数据（不允许丢失）选用FileChannel，允许部分丢失的数据如日
阅读更多2024-12-31
Go中CAS算法
CAS算法常被用作乐观锁的实现方式，用于解决并发问题。例如，在计数器、缓存等场景中，可以使用CAS算法来确保数据的一致性和正确性。CAS操作会检查内存位置V的当前值是否与预期的旧值A相等。这一操作是原
阅读更多2024-12-31
Node.js 记账本项目总结
在使用Node.js结合Express框架构建记账本的过程中，遇到了一些常见的问题，这些问题主要集中在路径处理、包管理工具的选择、开发环境优化以及HTTP响应处理等方面。
阅读更多2024-12-31
Java 处理base64文件上传
在系统内有一个类似于公告的模块，如果里面添加的文章不是选择富文本上传图片的方式，而是选择复制别的文章直接粘贴到系统内的富文本，里面的图片就不会url，而是图片的base64格式，这样会导致数据库存储压
阅读更多2024-12-31
Tailwind CSS 实战：现代登录注册页面开发
基础结构搭建表单组件开发社交登录集成响应式适配深色模式支持动画效果表单验证性能优化可访问性增强通过合理使用 Tailwind CSS 的原子类，我们不仅实现了美观的界面，还确保了良好的用户体验和可维护
阅读更多2024-12-31
node.js下载、安装、设置国内镜像源（永久）（Windows11）
系统：Windows 11。
阅读更多2024-12-31
Slate文档编辑器-Decorator装饰器渲染调度
在这里我们主要讨论了slate中的decoration装饰器的实现，以及在实际使用中可能会遇到的问题，主要是在跨节点的情况下，我们需要将range拆分为多个range，然后分别进行处理，并且还分析了源
阅读更多2024-12-31
python去水印
请注意，这种方法仅适用于简单的水印去除，对于复杂的水印或嵌入到图像纹理中的水印，可能无法达到理想的效果。在实际应用中，还可以考虑使用深度学习的方法，如生成对抗网络（GAN）来去除水印，但需要大量的数据
阅读更多2024-12-31

项目-02-数学学院后台项目开发过程中的问题总结

目录

一、后台（pc端，vue2）

1. dialog对话框被黑色蒙层盖住

2. 将前端表格导出为word文档

3. 在线查看、下载 .docx、.doc、.pdf文档

相关文章