jspdf上传pdf到服务器（附Java代码）

jspdf上传pdf到服务器（附Java代码）

因为有个需求，需要把生成的pdf上传到后端，jspdf有个方法可以把生成的pdf转成base64，我们再把base64转成pdf文件，然后再上传到服务器。

async function download(content) {
    let indnum = 0;
    var PDF = new jsPDF('1', 'pt', [1920 * 0.75, 1080 * 0.75])
    for (let index = 0; index < content.length; index++) {
        await html2canvas(content[index], {
            useCORS: true,
            allowTaint: true,
            scale: 2 // 提升画面质量，但是会增加文件大小
        }).then(function (canvas) {
            /**jspdf将html转为pdf分页，整体思路：
             * 1. 获取DOM
             * 2. 将DOM转换为canvas
             * 3. 获取canvas的宽度、高度（稍微大一点）
             * 4. 将pdf的宽高设置为canvas的宽高
             * 5. 将canvas转为图片
             * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
             */
            // 得到canvas画布的单位是px 像素单位
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            // 将canvas转为base64图片
            var pageData = canvas.toDataURL('image/jpeg', 1.0)
            // 设置内容图片的尺寸，img是pt单位
            var imgX = (contentWidth) / 2 * 0.75;
            var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
            // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
            PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY);
            if (indnum < content.length - 1) {
                PDF.addPage();
            }
            // 保存下载
            if (indnum == content.length - 1) {
               	// PDF.save('学习资料.pdf')
               	let base64 = PDF.output("datauristring");
               	let file = convertBase64ToFile(base64, "学习资料");
               	// 上传到服务器
               	uploadPdf(file);
            }
            indnum += 1;
        }).catch(res => {
        	console.log("下载失败，请重新下载！");
        })
    }
}

/**
 * base64转文件
 * @param urlData 数据
 * @param filename 文件名
 * @returns {*}
 */
function convertBase64ToFile(urlData, filename) {
    var arr = urlData.split('base64,');
    var type = arr[0].match(/:(.*?);/)[1];
    var fileExt = type.split('/')[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename + "." + fileExt, {
        type: type
    });
}
/**
 * 上传pdf到服务器
 * @returns {Promise}
 */
function uploadPdf(file) {
	let formData = new FormData();
	formData.append("pdf", file);
	$.ajax({
	    url: "/file/uploadPdf",
	    type: "post",
	    async: false,
	    data: formData,
	    processData: false,
	    contentType: false,
	    success: function (res) {
	        if (res.status == 200) {
	        	console.log("后端返回pdf保存的位置：" + res.data.url);
	        }
	    }
	})
}

Java controller代码

@RequestMapping(value = "/file/uploadPdf",method = RequestMethod.POST)
@ResponseBody
public CommonResult upLoadPlanFile(@RequestParam("pdf") MultipartFile uploadFile) {
	long startTime = System.currentTimeMillis();
	String pathForDb = null;
	String type = null;//文件类型
	String fileName;
	long size;
	try {
		if (uploadFile.isEmpty()) {
			return CommonResult.error("文件不能为空");
		}
		size = uploadFile.getSize();
		fileName = uploadFile.getOriginalFilename();// 文件原名称
		// 判断文件类型
		type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length())
				: null;
		if (type == null) {
			// 判断文件类型是否为空
			return CommonResult.error("文件类型不能为空");
		}
		fileName = UUID.randomUUID().toString() + "." + type;
		File targetFile = new File(basePath, fileName);
		// 保存到数据库的路径
		pathForDb = "pdf/" + fileName;
		log.debug("文件数据库保存路径:" + pathForDb);

		if (!targetFile.exists()) {
			new File(basePath).mkdirs();
		}

		// 转存文件到指定的路径
		uploadFile.transferTo(targetFile);

		if (targetFile.exists()) {
			log.debug("文件成功上传到指定目录下");
		}
	} catch (Exception e) {
		e.printStackTrace();
		return CommonResult.error("图片上传失败");
	}
	long endTime = System.currentTimeMillis();
	log.debug("上传用时：" + String.valueOf(endTime - startTime) + "ms");
	Map<String,Object> map = new HashMap<>();
	map.put("url", pathForDb);
	map.put("size", size);
	return CommonResult.success(map);
}