Chrome 확장 프로그램에서 'CSV로 내보내기'버튼을 사용하려면 어떻게해야하나요?

Question

페이지를 스캔하고 현재 페이지의 h1-h6 태그 목록을 팝업 창에 생성하는 Chrome 확장 프로그램을 만들었습니다. 이 목록은 주요 StackOverflow의 페이지처럼 보이는 방법입니다

h1 | All Questions 
h3 | XmlElement has a list as attribute but its items aren't separated by comma 
h3 | Eclipse, Easily remove/fix all @Override due to Java version change 
... 

내가 나에게 CSV 형식으로이 보고서를 저장하는 능력을 줄 것이다에 "내보내기"버튼을 가지고 싶습니다

. 가능한가?

Answer 1

data URI scheme을 사용하여 CSV 콘텐츠를 저장하는 URI를 만들 수 있습니다. 그런 다음 download attribute을 원하는 파일 이름으로 설정하여 A 요소를 만들 수 있습니다.

CSV가 실제로 큰 경우 데이터 URI 체계 대신 BlobBuilder 및 webkitURL.createObjectURL을 사용하여 링크 href를 만들어야합니다.

var link = document.createElement("a"); 
link.textContent = "Save as CSV"; 
link.download = "file.csv"; 
link.href = "data:text/csv,h1;All Questions\n" 
document.body.appendChild(link); 

사용자가 링크의 "file.csv"을 클릭합니다

가 자동으로 기본 다운로드 폴더에 저장됩니다 :

여기에 데이터 URI 방식을 사용하는 예입니다.