| | |
| | | <template> |
| | | <div> |
| | | |
| | | <button @click="cropAndDownload">截取图片</button> |
| | | <!-- <button @click="cropAndDownload">截取图片</button> --> |
| | | <!-- 显示裁剪后的图片 --> |
| | | <div style="width: 800px;"> |
| | | <!-- <div style="width: 800px;"> |
| | | <img style="width: 100%;" id="export-pdf" v-if="croppedImage" :src="croppedImage" alt="Cropped Image" /> |
| | | </div> |
| | | </div> --> |
| | | <div ref="elementToCrop" > |
| | | <div style="width: 100%;"> |
| | | <vue-office-excel :minRowLength="0" :src="excel" @rendered="rendered"/> |
| | |
| | | return { |
| | | excel:'', |
| | | cutAfterWidth:0, |
| | | croppedImage: null, // 图片 |
| | | // croppedImage: null, // 图片 |
| | | }; |
| | | }, |
| | | computed: { |
| | | }, |
| | | created() { |
| | | this.excel=JSON.parse(localStorage.getItem('pdfParams', '[]')).url |
| | | this.cutAfterWidth=JSON.parse(localStorage.getItem('pdfParams', '[]')).cutAfterWidth |
| | | this.excel=this.$route.query.url |
| | | this.cutAfterWidth=this.$route.query.cutAfterWidth |
| | | }, |
| | | mounted() { |
| | | }, |
| | |
| | | methods: { |
| | | rendered(){ |
| | | console.log("渲染完成") |
| | | if(JSON.parse(localStorage.getItem('pdfParams', '[]')).url){ |
| | | this.excel=JSON.parse(localStorage.getItem('pdfParams', '[]')).url |
| | | if(this.$route.query.url){ |
| | | this.excel=this.$route.query.url |
| | | this.cropAndDownload() |
| | | } |
| | | }, |