欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html轉(zhuǎn)pdf截圖保存功能的實(shí)現(xiàn)

  發(fā)布時間：2020-12-22 15:26:34   作者：ToBeYourBaBa   我要評論
這篇文章主要介紹了html轉(zhuǎn)pdf截圖保存功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

使用技術(shù)

itext.jar  : 將byte文件輸入流轉(zhuǎn)換為圖片，pdf等

html2canvas.js ：將html頁面區(qū)域截圖為base64編碼的圖片資源

java+js

1. 準(zhǔn)備資源

itext.jar
 www.baidu.com

html2canvas.js
www.baidu.com

2.前端代碼：

//進(jìn)行截圖操作，document.querySelector("body") 為要截圖的區(qū)域
     function test() {
            html2canvas(document.querySelector("body"), {
                onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL('image/png');
                    var formData = new FormData(); //模擬表單對象
                    formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //寫入數(shù)據(jù)
                    var xhr = new XMLHttpRequest(); //數(shù)據(jù)傳輸方法
                    xhr.open("POST", "http://localhost:8080/pdf"); //配置傳輸方式及地址
                    xhr.send(formData);
                    xhr.onreadystatechange = function () { //回調(diào)函數(shù)
                    };
                }
            });
        }

        //格式化圖片base64編碼轉(zhuǎn)換為byte文件流
        function convertBase64UrlToBlob(urlData){
            //去掉url的頭，并轉(zhuǎn)換為byte
            var bytes=window.atob(urlData.split(',')[1]);
            //處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var s = 0;s<bytes.length;s++){
                ia[s] = bytes.charCodeAt(s);
            }
            return new Blob( [ab] , {type : 'image/png'});
        }
        
        <body onclick="test()">//調(diào)用截圖方法即可

3.后端代碼：

@RequestMapping(value = "/pdf",method = RequestMethod.POST)
    public void test(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {
        String filePath = "D:\\blog\\exportPdf2.pdf";
        String imagePath = "D:\\blog\\exportImg2.png";
        Document document = new Document();
        try{
            Map getMap = request.getFileMap();
            MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //獲取數(shù)據(jù)
            InputStream file = mfile.getInputStream();
            byte[] fileByte = FileCopyUtils.copyToByteArray(file);

            FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//打開輸入流
            imageOutput.write(fileByte, 0, fileByte.length);//生成本地圖片文件
            imageOutput.close();

            PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf文件
            document.open();
            document.add(new Paragraph("JUST TEST ..."));
            Image image = Image.getInstance(imagePath); //itext-pdf-image
            float heigth = image.getHeight();
            float width = image.getWidth();
            int percent = getPercent2(heigth, width);  //按比例縮小圖片
            image.setAlignment(Image.MIDDLE);
            image.scalePercent(percent+3);
            document.add(image);
            document.close();

        }catch (DocumentException de) {
            System.err.println(de.getMessage());
        }
        catch (Exception e) {
            e.printStackTrace();

        }
    }

    private static int getPercent2(float h, float w) {
        int p = 0;
        float p2 = 0.0f;
        p2 = 530 / w * 100;
        p = Math.round(p2);
        return p;
    }

4 包名

import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Image;
import com.itextpdf.text.Paragraph;
import com.itextpdf.text.pdf.PdfWriter;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.imageio.stream.FileImageOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Map;

4 前端截圖，訪問后端接口，保存截圖文件到本地為pdf或者其他格式的文件。

 有興趣的同學(xué)可以把后端改為下載文件到本地

5 項(xiàng)目源碼地址

https://github.com/zhangjy520/learn_java/tree/master/boot 

到此這篇關(guān)于html轉(zhuǎn)pdf截圖保存功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)html轉(zhuǎn)pdf截圖保存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論