Vue如何将网页转换成图片或PDF并上传

一.使用html2canvas获取页面元素并绘制成图片

htmlcanvas中文文档

npm install --save html2canvas

<template>
	<div>
		<button @click="uploadImg">上传</button>
		<div ref="yourDom">
			<!-- ...图片中页面内容 -->
			<img src="@/assets/logo/logo.png" alt="" />
		</div>
	</div>
</template>

import html2canvas from 'html2canvas';

	//base64转file
    base64ToFile(dataURL, filename) {
      let arr = dataURL?.split?.(',');
      let youType = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename + '.' + youType.split('/')[1], { type: youType });
    },
    
    //点击上传按钮
    uploadImg() {
      html2canvas(this.$refs.yourDom, {
        allowTaint: true, //是否允许不同源的图片污染画布
        useCORS: true, //是否尝试使用 CORS 从服务器加载图片
        scale: 2, //用于渲染的比例，默认为浏览器设备像素比率。
      }).then(canvas => {
        // canvas.toDataURL(type, encoderOptions) 是 JavaScript 中用于将 <canvas> 元素的内容转换为数据 URL 的方法
        // type：指定输出的图像类型，默认为 "image/png"。也可以是 "image/jpeg" 或 "image/webp" 等格式。
        // encoderOptions：用于指定图像编码质量或压缩级别的参数（取值范围为 0-1），仅适用于 "image/jpeg" 和 "image/webp" 格式。
        let imgBase64Url = canvas.toDataURL('image/jpeg', 1);
        let imgFile = this.base64ToFile(imgBase64Url, '图片名称');
        console.log('🚀 ~ canvasImg ~ imgFile:', imgFile);
        //你的上传接口方法
        //let formData = new FormData();
        //formData.append('avatarfile', imgFile);
        //uploadAvatar(formData).then(response => {
        //console.log(window.location.origin + process.env.VUE_APP_BASE_API + response.imgUrl);
        });
      });
    },

效果

二.使用jspdf生成pdf并将图片添加进去

jsPDF中文文档并找不到啥需要的东西

npm install jspdf --save

import jsPDF from 'jspdf';

将uploadImg方法中上传图片部分换为转换成pdf并上传

 //点击上传按钮
    uploadImg() {
      html2canvas(this.$refs.yourDom, {
        allowTaint: true, //是否允许不同源的图片污染画布
        useCORS: true, //是否尝试使用 CORS 从服务器加载图片
        scale: 2, //用于渲染的比例，默认为浏览器设备像素比率。
      }).then(canvas => {
        // canvas.toDataURL(type, encoderOptions) 是 JavaScript 中用于将 <canvas> 元素的内容转换为数据 URL 的方法
        // type：指定输出的图像类型，默认为 "image/png"。也可以是 "image/jpeg" 或 "image/webp" 等格式。
        // encoderOptions：用于指定图像编码质量或压缩级别的参数（取值范围为 0-1），仅适用于 "image/jpeg" 和 "image/webp" 格式。
        let imgBase64Url = canvas.toDataURL('image/jpeg', 1);
        this.imgToPdf(canvas, imgBase64Url);
      });
    },
//图片转pdf
	imgToPdf(canvas, imgBase64Url) {
      let pdf = new jsPDF('p', 'pt', 'a4');
      pdf.addImage(imgBase64Url, 'JPEG', 0, 0, canvas.width * 0.2, canvas.height * 0.2);
      let pdfBlob = pdf.output('blob');
      let pdfFile = new File([pdfBlob], '文件名字.pdf', { type: 'application/pdf' });
      console.log('pdfFile', pdfFile);

      //你的上传接口方法
      //let formData = new FormData();
      //formData.append('avatarfile', pdfFile);
      //uploadAvatar(formData).then(response => {
        //console.log(window.location.origin + process.env.VUE_APP_BASE_API + response.imgUrl);
      //});
      
      //下载文件
      // pdf.save("文件名字.pdf");
    },

效果