文章目录

• 一、GET接口获取资源下载
• 二、POST接口返回文件流下载
• 三、导出Html页面内容为Doc

一、GET接口获取资源下载

这种方式最简单，直接 拼接好下载接口路径和参数，然后跳页访问即可

二、POST接口返回文件流下载

/*** 根据接口获取文件并下载* @param action 接口路径* @param params 接口请求参数* @param method 接口请求方式* @param parent 生成form父级元素*/export const formDataDownFile = (action: string, params: any, method: string = 'post', parent: string = 'app') => {const App = document.getElementById(parent)const form = document.createElement("form")// 可结合iframe标签，处理成不跳页的方式const iframe = document.createElement("iframe")iframe.id = "downloadBox"iframe.name = "downloadBox"iframe.style.display = "none"form.method = `${method}`form.target = "downloadBox"form.action = actionfor (const key in params) {if (Object.prototype.hasOwnProperty.call(params, key)) {let element = params[key]if (typeof element !== 'string') {element = JSON.stringify(element)}// 将该输入框插入到 form 中form.appendChild(createInputElement(key, element))}}App?.appendChild(form)App?.appendChild(iframe)form.submit()App?.removeChild(form)App?.removeChild(iframe)
}
// 创建Input标签
export const createInputElement = (name: string, value: string, type: string = 'text' ) => {// 创建一个输入  const input = document.createElement("input");  // 设置相应参数  input.name = name;input.value = value;input.type = type;return input
}

三、导出Html页面内容为Doc

这个方式需要安装 一些依赖，和定义需要导出的模版
先安装以下依赖
npm i docxtemplater -D
npm i pizzip -D
npm i jszip-utils -D
npm i file-saver -D
npm i angular-expressions -D
直接看代码，如下

import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import expressions from 'angular-expressions'
import assign from 'lodash-es/assign'
export const ExportBriefDataDocx = (tempDocxPath: string, data: object, fileName: string) => {expressions.filters.lower = function (input: any) {// This condition should be used to make sure that if your input is// undefined, your output will be undefined as well and will not// throw an errorif (!input) return input// toLowerCase() 方法用于把字符串转换为小写。return input.toLowerCase()}function angularParser(tag: string) {tag = tag.replace(/^\.$/, 'this').replace(/(’|‘)/g, "'").replace(/(“|”)/g, '"')const expr = expressions.compile(tag)return {get: function (scope: object, context: any) {let obj = {}const scopeList = context.scopeListconst num = context.numfor (let i = 0, len = num + 1; i < len; i++) {obj = assign(obj, scopeList[i])}return expr(scope, obj)}}}JSZipUtils.getBinaryContent(tempDocxPath, (error: unknown, content: ArrayBuffer) => {if (error) {console.log(error)}// 创建一个JSZip实例，内容为模板的内容// let zip = new JSZip(content); //用PizZip替代const zip = new PizZip(content)// 创建并加载 Docxtemplater 实例对象const doc = new Docxtemplater(zip, { parser: angularParser })// 设置模板变量的值doc.setData(data)try {// 呈现文档，会将内部所有变量替换成值，doc.render()} catch (error: any) {const e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties}console.log({ error: e })// 当使用json记录时，此处抛出错误信息throw error}// 生成一个代表Docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）const out = doc.getZip().generate({type: 'blob',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})// 将目标文件对象保存为目标类型的文件，并命名saveAs(out, fileName)})
}

使用方式，先新建个doc模版，例如导出的文档格式如下

text.docx

然后使用上述方法导出文档

<template><div class="docx"><el-button @click="exportDocx">导出el-button><h2>{{ year }}年{{ month }}月h2><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="日期" width="180">el-table-column><el-table-column prop="name" label="姓名" width="180">el-table-column><el-table-column prop="address" label="地址">el-table-column>el-table>div>
template>
<script setup lang="ts">
import { ExportBriefDataDocx } from 'front-end-functions'
import { reactive, ref } from 'vue';
const year = ref('2023')
const month = ref('04')
const tableData = reactive([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'
}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'
}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'
}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'
}])
const exportDocx = () => {const docxData = {tableData,year: year.value,month: month.value}ExportBriefDataDocx('/text.docx', docxData, '文档导出.docx')
}
script><style scoped>style>

最后导出文档内容如下

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！