vue3+ts 封装文件下载的公共方法，实现点击按钮下载文件功能

1、在项目路径 src\utils\common.ts 里封装公共方法

// 下载文件方法  filename文件命名, str需要下载的内容
function saveAsPbtxt(filename: any, str: any) {
  const blob = new Blob([str], { type: "application/json;charset=utf-8" });
  const href = URL.createObjectURL(blob);
  const alink = document.createElement("a");
  alink.style.display = "none";
  alink.download = filename; // 下载后文件名
  alink.href = href;
  document.body.appendChild(alink);
  alink.click();
  document.body.removeChild(alink); // 下载完成移除元素
  URL.revokeObjectURL(href); // 释放掉blob对象
}
//导出公共方法
export default { saveAsPbtxt };

2、引入使用

 <el-button type="primary" size="small" link @click="download"> 下载 </el-button>

import utils from "@/utils/common";


function download() {
    //完善其它逻辑代码
    ...
    //使用封装好的下载文件方法
    utils.saveAsPbtxt(file_name, content);
  }