{"version":3,"sources":["webpack:///./src/views/ToPdf.vue?605e","webpack:///src/views/ToPdf.vue","webpack:///./src/views/ToPdf.vue?e52a","webpack:///./src/views/ToPdf.vue","webpack:///./src/views/ToPdf.vue?b66a"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","imgToPDF","length","on","handleBack","_v","_l","item","index","key","staticStyle","attrs","content","codeImg","ref","form","model","value","callback","$$v","$set","expression","disabled","downPDF","submit","staticRenderFns","data","checkedId","title","category","desc","pdfBase64","computed","mounted","methods","$router","push","getcheckedId","post","description","type","headers","then","path","catch","draft","console","$message","html2Canvas","dpi","useCORS","contentWidth","canvas","width","contentHeight","height","pageHeight","leftHeight","position","imgWidth","imgHeight","pageData","toDataURL","pdf","component"],"mappings":"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","file":"js/topdf.492c09f9.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\"},[_c('div',{staticClass:\"box\"},[(_vm.imgToPDF.length==0)?_c('div',{staticClass:\"backAdd\",on:{\"click\":_vm.handleBack}},[_c('i',{staticClass:\"el-icon-document-add\"}),_c('span',[_vm._v(\"点击添加图片\")])]):_vm._l((_vm.imgToPDF),function(item,index){return _c('div',{key:index,staticClass:\"item\"},[_c('el-image',{staticStyle:{\"width\":\"984.3px\",\"height\":\"699px\"},attrs:{\"src\":(\"https://static.kidstory.cc/\"+item.content),\"fit\":\"contain\"}})],1)}),_c('div',{staticClass:\"item\"},[_c('el-image',{staticStyle:{\"width\":\"984.3px\",\"height\":\"699px\"},attrs:{\"src\":_vm.codeImg,\"fit\":\"contain\"}})],1)],2),_c('div',{staticClass:\"details\"},[_c('el-form',{ref:\"form\",attrs:{\"model\":_vm.form,\"label-width\":\"80px\"}},[_c('el-form-item',{attrs:{\"label\":\"书名\"}},[_c('el-input',{model:{value:(_vm.form.title),callback:function ($$v) {_vm.$set(_vm.form, \"title\", $$v)},expression:\"form.title\"}})],1),_c('el-form-item',{attrs:{\"label\":\"类别\"}},[_c('el-select',{attrs:{\"placeholder\":\"请选择绘本类别\"},model:{value:(_vm.form.category),callback:function ($$v) {_vm.$set(_vm.form, \"category\", $$v)},expression:\"form.category\"}},[_c('el-option',{attrs:{\"label\":\"儿童读物\",\"value\":\"reading\"}}),_c('el-option',{attrs:{\"label\":\"习惯养成\",\"value\":\"habit\"}}),_c('el-option',{attrs:{\"label\":\"英语启蒙\",\"value\":\"english\"}}),_c('el-option',{attrs:{\"label\":\"数学启蒙\",\"value\":\"math\"}}),_c('el-option',{attrs:{\"label\":\"科普百科\",\"value\":\"knowledge\"}}),_c('el-option',{attrs:{\"label\":\"其他\",\"value\":\"others\"}})],1)],1),_c('el-form-item',{attrs:{\"label\":\"介绍\"}},[_c('el-input',{attrs:{\"type\":\"textarea\"},model:{value:(_vm.form.desc),callback:function ($$v) {_vm.$set(_vm.form, \"desc\", $$v)},expression:\"form.desc\"}})],1),_c('div',{staticClass:\"btn\"},[_c('el-button',{attrs:{\"disabled\":_vm.disabled},on:{\"click\":_vm.downPDF}},[_vm._v(\"下载PDF\")]),_c('el-button',{attrs:{\"type\":\"primary\"},on:{\"click\":_vm.submit}},[_vm._v(\"发布作品\")])],1)],1)],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"container\">\n    \n    <div class=\"box\">\n      <div v-if=\"imgToPDF.length==0\" class=\"backAdd\" @click=\"handleBack\"><i class=\"el-icon-document-add\" ></i><span>点击添加图片</span></div>\n      <div v-else v-for=\"(item, index) in imgToPDF\" :key=\"index\" class=\"item\">\n        <el-image :src=\"(`https://static.kidstory.cc/`+item.content)\" style=\"width:984.3px; height:699px\" fit=\"contain\"></el-image>\n      </div>\n      <div  class=\"item\">\n        <el-image :src=\"codeImg\" style=\"width:984.3px; height:699px\" fit=\"contain\"></el-image>\n      </div>\n    </div>\n    <div class=\"details\">\n      <el-form ref=\"form\" :model=\"form\" label-width=\"80px\">\n  <el-form-item label=\"书名\">\n    <el-input v-model=\"form.title\"></el-input>\n  </el-form-item>\n   <el-form-item label=\"类别\">\n    <el-select v-model=\"form.category\" placeholder=\"请选择绘本类别\">\n      <el-option label=\"儿童读物\" value=\"reading\"></el-option>\n      <el-option label=\"习惯养成\" value=\"habit\"></el-option>\n       <el-option label=\"英语启蒙\" value=\"english\"></el-option>\n        <el-option label=\"数学启蒙\" value=\"math\"></el-option>\n        <el-option label=\"科普百科\" value=\"knowledge\"></el-option>\n        <el-option label=\"其他\" value=\"others\"></el-option>\n    </el-select>\n  </el-form-item>\n\n  <el-form-item label=\"介绍\">\n    <el-input type=\"textarea\" v-model=\"form.desc\"></el-input>\n  </el-form-item>\n  <div class=\"btn\">\n   <el-button @click=\"downPDF\" :disabled=\"disabled\">下载PDF</el-button>\n    <el-button @click=\"submit\" type=\"primary\">发布作品</el-button>\n    \n  </div>\n\n      </el-form>\n\n    </div>\n  </div>\n</template>\n\n\n<script>\nimport html2Canvas from \"html2canvas\";\nimport JsPDF from \"jspdf\";\nimport { mapState } from \"vuex\";\n\nexport default {\n  data() {\n    return {\n      disabled:false,\n      checkedId:[],\n      form: {\n          title: '',\n          category: '',\n          desc:''\n    },\n    codeImg:require('../assets/images/pdfCode.png'),\n    pdfBase64:''\n    }\n  },\n  computed: mapState([\"imgToPDF\"]),\n  mounted(){\n     \n  },\n  methods: {\n    handleBack(){\n      this.$router.push('/user/upload/compose-illustration/');\n    },\n    getcheckedId(){\n      for(var i=0;i<this.imgToPDF.length;i++){\n      //获取绘本图片ID\n      let tool=this.imgToPDF[i]._id\n     \n      //将图片id添加到checkedId\n      this.checkedId.push(tool)\n      \n    }  \n    },\n    //上传绘本\n    async submit(){\n     await this.getcheckedId()\n     //this.$router.push('/user/upload/submit-res/');\n     this.$http\n       .post(`/book/`,{content:this.checkedId,title:this.form.title,description:this.form.desc,type:this.form.category}\n       ,{\n         headers:{\n           \"Authorization\":\"Bearer \"+localStorage.getItem(\"token\")\n         }\n       })\n       .then((response) => {\n         if (response.data.desc === \"success\") {\n          this.$router.push('/user/upload/submit-res/')        \n         } else {\n            this.$router.push({path:'/errorpage'});   \n         }\n       })\n       .catch((error) => console.log(error));\n     \n    },\n    draft(){\n       console.log(\"作品已保存\")\n    },\n\n    downPDF() {\n      this.disabled = true;\n      this.$message(\"正在下载，请勿重复点击\");\n\n      let target = document.getElementsByClassName(\"box\");\n      console.log(target)\n     //打印区域\n      html2Canvas(target[0], {\n        dpi: 172,\n        useCORS: true,\n      }).then((canvas) => {\n        var contentWidth = canvas.width;\n        var contentHeight = canvas.height;\n      \n        //一页pdf显示html页面生成的canvas高度;\n        var pageHeight = (contentWidth / 984.3) * 699;\n        //未生成pdf的html页面高度\n        var leftHeight = contentHeight;\n        //pdf页面偏移\n        var position = 0;\n        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高\n        var imgWidth = 984.3;\n        var imgHeight = (984.3 / contentWidth) * contentHeight;\n        var pageData = canvas.toDataURL(\"image/jpeg\");\n        var pdf = new JsPDF(\"l\", \"pt\", [imgWidth,699]);\n      \n        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)\n        //当内容未超过pdf一页显示的范围，无需分页\n        if (leftHeight < pageHeight) {\n          pdf.addImage(pageData, \"JPEG\", 0, 0, imgWidth, imgHeight);\n        } else {\n          while (leftHeight > 0) {\n            pdf.addImage(pageData, \"JPEG\", 0, position, imgWidth, imgHeight);\n            leftHeight -= pageHeight;\n            position -= 699;\n            //避免添加空白页\n            if (leftHeight > 0) {\n              pdf.addPage();\n            }\n          }\n        }\n        //保存到本地\n        pdf.save(\"StoryTime.pdf\");\n        //上传至服务器\n        this.pdfBase64 = pdf.output(\"dataurlstring\");\n        console.log(this.pdfBase64);\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.container {\n  width: 100vw;\n  height: 90vh;\n  background-color: #f5f5f5;\n  overflow: scroll;\n}\n.btn {\n  width: 984.3px;\nheight:120px;\npadding:40px 0;\n  margin:auto;\n  display: flex;\n  justify-content: space-around;\n  \n  \n}\n.box {\n  width: 984.3px;\n  min-height: 699px;\n  margin: auto;\n  background-color: #fff;\n  border-radius: 8px;\n}\n.box .item{\n  width: 984.3px;\n  height: 699px;\n}\n\n.details{\n  width: 984.3px;\n  height: 200px;\n  margin:auto;\n  margin-top:24px;\n}\n\n.backAdd{\n    width:240px;\n    height:160px;\n    font-size: 60px;\n    align-items: center;\n    border: 6px dashed #eee;\n    cursor: pointer;\n    display: flex;\n   position: relative;\n   left:372px;\n   top:269.5px;\n    flex-direction: column;  \n     padding:37px 0;\n}\n.backAdd span{\n    font-size:18px;\n    height:18px;\n    line-height: 18px;\n    margin-top: 8px;\n  \n}\n.backAdd:hover{\n    background-color: #f5f6fa;\n} \n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToPdf.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToPdf.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ToPdf.vue?vue&type=template&id=169af986&scoped=true&\"\nimport script from \"./ToPdf.vue?vue&type=script&lang=js&\"\nexport * from \"./ToPdf.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ToPdf.vue?vue&type=style&index=0&id=169af986&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"169af986\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToPdf.vue?vue&type=style&index=0&id=169af986&scoped=true&lang=css&\""],"sourceRoot":""}