html怎么轉(zhuǎn)pdf

發(fā)布時間：2021-04-26 13:58:25 來源：億速云閱讀：142 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)html怎么轉(zhuǎn)pdf的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

html有什么特點(diǎn)

1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 3、平臺無關(guān)性：超級文本標(biāo)記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。

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;

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

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

感謝各位的閱讀！關(guān)于“html怎么轉(zhuǎn)pdf”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

html怎么轉(zhuǎn)pdf

html有什么特點(diǎn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽