一、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 = action
for (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 error
if (!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.scopeList
const num = context.num
for (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>
最后导出文档内容如下
