Vue.jsでjszipとfilesaver.jsを使ってzipフォルダを作成し、ダウンロードしてみる。

初めに

今回はjavascriptのライブラリの一つ、jszipとfilesaver.jsというライブラリの記事を書こうと思います。
jszipというものはzipとして圧縮するためのライブラリで,filesaver.jsはファイルをダウンロードするためのライブラリです。
必要最低限(zipフォルダにファイルやフォルダ又はフォルダの中にファイルを入れる)のやり方を書きます。

必要な技術、ライブラリ

• vue.cli(vue.js)
• jszip
• filesaver.js

やり方

必要最低限をやるために必要なメソッドは、file() folder() generateAsync() saveAs() の4つ。
file()の第一引数はファイル名(string型),第二引数は内容(string型,array型etc)です。
folder()の第一引数はファイル名(string型)。
generateAsync()はzipフォルダを作成するためのメソッドで、第一引数には作成するzipのタイプを指定します。
saveAs()はfilesaver.jsのメソッドです。第一引数にはダウンロードするzipフォルダ、第二引数はzip名。

practice.vue

  <template>
    <div>
      <a v-on:click="make">ダウンロード</a>
    </div>
  </template>

  <script>
  import jszip from 'jszip'
  import saveAs from 'filesaver'
  export default{
    methods:{
       make(){
         let zip = new jszip(); //インスタンス作成
         zip.folder('icon').file('test.txt','hello world') //iconフォルダを作り、その中にtest.txtファイルを作っている。
         zip.file('practice.js','hello') // iconフォルダと同じ階層にjsファイルを作っている。
　
         zip.generateAsync({type:'blob'}) //blobタイプのzipを作成。
           .then(function(blob){ //zipデータを受け取る。
             saveAs(blob,"hello.zip") //第一引数は受け取ったzipデータ,第二引数はzipの名前(.zipは無くてもいい)
           })
       }
   }
</script>

これはjszipのページのexampleに載っているコードを少し書き直した物ですが、これだけでzipフォルダを作る事ができます。

終わりに

また時間があったらjszipとfilesaver.jsを勉強して記事を書こうと思います。