如何在 next.js 中使用 api 下载 txt 文件

Question

如何在next.js中使用api下载txt

console.log(ninjas) 已经显示了正确的信息

我已经测试过 api postman 并且工作完美 当我在邮递员中使用与控制台登录代码相同的信息输出时 但是我如何添加功能来下载文件 所以我会弹出下载

新错误

error ReferenceError: triggerDownload is not defined
    at C:\java\node\next\test\.next\server\pages\test2.js:32:147
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

我正在使用的代码

/////////////////// api scrip audiocodes

export const getStaticProps = async () => {
  var myHeaders = new Headers();
  myHeaders.append("Authorization", "Basic password");
  
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
  
  fetch("http://10.0.5.26/api/v1/files/ini", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .then(result => triggerDownload(result, 'board.ini'))
    .catch(error => console.log('error', error));

    return {
      
    }
  }
  ////////////////   start website
  const Backup = () => {
    
return (
    <div>
      <h>Download started</h> 
    </div>
  );
} 
export default Backup;

日志console.log(ninjas)的输出文件

;**************
;** Ini File **
;**************

;Time & Date: 16/08/2021 09:13:59
;Device Up Time: 48d:21h:38m:41s
;Board: UNIVERGE BX9000
;Board Type: 72
;Serial Number: 9107130
;Software Version: 7.20A.256.721
;DSP Software Version: 5014AE3_R => 723.06
;Board IP Address: 10.0.5.26
;Board Subnet Mask: 255.255.255.0
;Board Default Gateway: 10.0.5.4
;CPU: Cavium Networks Octeon V0.1 @ 500Mhz, total 2 cores, 2 cpus, 1 sockets
;Cores mapping:
;core #0, on cpu #0, on socket #0
;core #1, on cpu #1, on socket #0
;Memory: 512 MB
;Flash size: 64 MB
;Num of DSP Cores: 3
;Num of physical LAN ports: 12
;Client defaults file is being used (file length=1573)
;;;Key features:;Board Type: 72 ;IP Media: VXML ;DATA features: FireWall&VPN ;PSTN Protocols: ISDN IUA=2 CAS ;Security: IPSEC MediaEncryption StrongEncryption EncryptControlProtocol ;Channel Type: RTP DspCh=150 ;HA ;Coders: G723 G729 GSM-FR G727 G722 ;DSP Voice features: IpmDetector ;Control Protocols: MSFT FEU=50 SIP SBC=25 ;Default features:;Coders: G711 G726;

;-----  HW components -----
;
; Slot # : Module type : # of ports
;----------------------------------------------
;      1 : Empty
;      2 : Empty
;      3 : Empty
;----------------------------------------------

;USB Port 1: Empty
;USB Port 2: Empty
;----------------------------------------------


[SYSTEM Params]

SyslogServerIP = 
EnableSyslog = 1
TelnetServerEnable = 2
ENABLEPARAMETERSMONITORING = 1
ActivityListToLog = 'pvc', 'afl', 'dr', 'fb', 'swu', 'naa', 'spc', 'll', 'cli', 'ae'
SyslogServerPort = 0
DayLightSavingTimeStart = '01:01:00:00'
DayLightSavingTimeEnd = '01:01:00:00'
DayLightSavingTimeEnable = 1
HALocalMAC = '00908f8ass'
TR069ACSPASSWORD = ''
TR069CONNECTIONREQUESTPASSWORD = ''
NTPServerIP = ''
SBCWizardFilename = 'templates4.zip'
PM_VEDSPUtil = '1,135,150,15'

Answer 1

我有点困惑为什么你在做response.text()，后来又做了ninjas.map，它会映射到字符串的字符上。

假设您对其进行了编辑以查看 console.log 或在从多个文件复制代码时丢失了某些内容...

如果您想触发包含自定义内容的下载对话框，您可以执行以下操作：

function triggerDownload(stringContent = '', filename = 'download.blob') {
  const blob = new Blob([stringContent], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')

  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}
triggerDownload('string, do a JSON.stringify(ninja) if object', 'config.json')

// <a onClick={()=>triggerDownload(ninja.content, `${ninja.id}.ini`)}
// <a onClick={()=>triggerDownload(ninja.content, ninja.id + '.ini')}

@juliomalves 提到的topic 中还提到了js-file-download lib 和react-download-link 组件

所以这整件事可能是重复的，或者我所有的假设都是错误的:)