nodejs(officegen)+vue(axios)가 클 라 이언 트 에서 워드 문 서 를 내 보 내 는 방법

머리말
제 프로젝트 에 필요 한 것 이 있 습 니 다.단 추 를 누 르 면 편집 가능 한 워드 문서 주문 정보 가 생 성 됩 니 다.
제 가 사용 하 는 프론트 프레임 은 Vue.js 이 고 백 엔 드 는 node.js 입 니 다.
node.js 에서 워드 문 서 를 생 성하 고 내 보 냅 니 다.제 가 참고 한 것 은 다음 두 편의 글 입 니 다.잘 썼 습 니 다.
https://www.jb51.net/article/144769.htm
https://github.com/Ziv-Barber ...
문제.
node.js 위 에 있 는 이 두 편의 글 은 이미 잘 말 했 습 니 다.그러나 제 가 실현 하 는 과정 에서 문제 가 발생 했 습 니 다.저 는 백 엔 드 에서 완전한 워드 문 서 를 만 들 수 있 지만 전단 으로 돌아 가 다운로드 할 때 문제 가 발생 했 습 니 다.처음에는 node.js 백 스테이지 코드 로 인 한 줄 알았어 요.처음 쓰 는 거 잖 아 요^ ^.그러나 끊 임 없 는 테스트 에서 나 는 발견 했다.
1.단 추 를 누 르 면 vue 에 있 는 axios 로 localhost:8081/order/getDoc 에 워드 문 서 를 직접 만 들 지 않 고 되 돌아 오 는 데이터 console.log(res)를 보 여 달라 고 요청 합 니 다.얻 은 데 이 터 는 어 지 러 운 문자열 입 니 다.
2.그러나 브 라 우 저 주소 표시 줄 에서 같은 백 엔 드 인 터 페 이 스 를 요청 하면 전체 워드 문 서 를 만 들 수 있 습 니 다!

문제 의 근원
실마리 가 잡 히 자마자 인터넷 검색 을 시 작 했 습 니 다.ajax 의 수용 유형 은 string 문자열 일 뿐 스 트림 형식 이 아니 라 파일 다운로드 가 불가능 하 다 는 것 을 알 게 되 었 습 니 다.ajax 방식 으로 요청 한 데 이 터 는 자바 scipt 메모리 공간 에 만 저장 할 수 있 습 니 다.자바 script 을 통 해 접근 할 수 있 지만 하 드 디스크 에 저장 할 수 없습니다.자바 script 은 하 드 디스크 와 직접 대화 할 수 없 기 때문에 안전 문제 가 될 것 입 니 다.
axios 는 첫 번 째 제3자 ajax 라 이브 러 리 이기 때문에 같 습 니 다.
해결 방법
해결 방법
해결 방법:blob 대상 을 이용 하여 Blob 대상 은 바 이 너 리 데 이 터 를 저장 하 는 용기 로 볼 수 있 습 니 다.바 이 너 리 대상 으로 바 이 너 리 파일 을 저장 할 수 있 는 용기 입 니 다.

methods:{
  handleClick(row){
  console.log(row);
  var orderId = row.orderId + row.oid.toString();
  console.log(orderId);
  this.$ajax({
  method:"get",
  url:"http://localhost:8081/order/getDoc",
  responseType:'blob'
  }).then((res)=>{
  //  res.data    blob  
  var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document    doc  
  var downloadElement = document.createElement('a');
  var href = window.URL.createObjectURL(blob); //       
  downloadElement.href = href;
  downloadElement.download = orderId+'.docx'; //      
  document.body.appendChild(downloadElement);
  downloadElement.click(); //    
  document.body.removeChild(downloadElement); //        
  window.URL.revokeObjectURL(href); //   blob  
  })
  }
 }

총결산
위 에서 말 한 것 은 소 편 이 소개 한 nodejs(officegen)+vue(axios)가 클 라 이언 트 에서 워드 문 서 를 내 보 내 는 방법 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!