html2canvas截图上传至后端并下载文件

心已赠人 2022-12-30 08:15 120阅读 0赞

前言：

主要是来源于一个需求，我需要将页面生成pdf然后下载，鉴于此页面的特殊性，最后决定的方案是我对后端难以生成的部分进行html截图上传到后端，然后后端将图片以及一些其它的部分根据itext生成pdf，然后返回给我。页面的实现效果是我点击按钮，然后pdf被下载。

参考：

# 第一章 在前端截图下载 #

值得注意的是html2canvas要用document.querySelector()来获取元素，如果使用$("\#xxx")或者document.getElementById()我这里会提示Element is not attached to a Document（后面再次测试时发现只是$("\#xxx")不行，document.getElementById()又可以了）

# 第二章 将截图传至后端并下载文件 #

当然图片前端下载就好，这里本人要上传到后端主要是想测试下图片在后端能不能用。

之前想的是用ajax上传并下载文件，但是试了一下发现ajax不能下载文件，从网上找了个不严谨的说法：浏览器中js不能操作磁盘，不然会引起安全问题，要想操作磁盘需要调用浏览器的一些其它的api。

这里采用的是模拟表单提交，值得注意的是，在后端转化图片时要把base64图片的图片头去掉即把data:image/png;base64,去掉，只保留base64图片的数据。

前端：

后端：

@RequestMapping("/test")
    @RestController
    public class TestUpload {
        @RequestMapping("/testUploadPhoto")
        public void testUploadPhoto(String canvasPhotoBase64Data, HttpServletResponse response){
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
            System.out.println("begin");
            System.out.println(canvasPhotoBase64Data);
            BASE64Decoder decoder = new BASE64Decoder();
            try {
                FileOutputStream write = new FileOutputStream(new File("testPhoto"));
                byte[] decoderBytes = decoder.decodeBuffer(canvasPhotoBase64Data.split(",")[1]);
                response.setHeader("content-disposition", "attachment;filename=" + "test.png");
                response.setContentType("multipart/form-data");
                response.getOutputStream().write((decoderBytes));
                response.getOutputStream().flush();
                response.getOutputStream().close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }