引入cnpm install html2canvas.
html代碼
<!-- 把需要生成截圖的元素放在一個元素容器里,設置一個ref --> <div class="image_tofile" ref="imageTofile"> <!-- 這里放需要截圖的元素,自定義組件元素也可以 --> </div> <!-- 如果需要展示截取的圖片,給一個img標簽 --> <img :src="htmlUrl">
js代碼
// 引入html2canvas import html2canvas from 'html2canvas' // 注冊組件 data() { return { htmlUrl: '' } }, components: { html2canvas }, methods: { // 頁面元素轉圖片 toImage() { // 第一個參數是需要生成截圖的元素,第二個是自己需要配置的參數,寬高等 html2canvas(this.$refs.imageTofile, { backgroundColor: null }).then((canvas) => { let url = canvas.toDataURL('image/png'); this.htmlUrl = url; // 把生成的base64位圖片上傳到服務器,生成在線圖片地址 this.sendUrl(); }) }, // 圖片上傳服務器 sendUrl () { // 如果圖片需要formData格式,就自己組裝一下,主要看后台需要什么參數 // const formData = new FormData() // formData.append('base64', this.company.fileUrl) // formData.append('userId', 123) // formData.append('pathName', 'pdf') this.$ajax({ url: apiPath.common.uploadBase, method: 'post', data: this.htmlUrl }).then(res => { if (res.code && res.data) { } }) } }