<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            html轉pdf截圖保存功能的實現

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

            使用技術

            itext.jar  : 將byte文件輸入流轉換為圖片,pdf等

            html2canvas.js :將html頁面區域截圖為base64編碼的圖片資源

            java+js

            1. 準備資源

            itext.jar
             www.baidu.com

            html2canvas.js
            www.baidu.com

            2.前端代碼:

            //進行截圖操作,document.querySelector("body") 為要截圖的區域
                 function test() {
                        html2canvas(document.querySelector("body"), {
                            onrendered: function (canvas) {
                                var dataUrl = canvas.toDataURL('image/png');
                                var formData = new FormData(); //模擬表單對象
                                formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //寫入數據
                                var xhr = new XMLHttpRequest(); //數據傳輸方法
                                xhr.open("POST", "http://localhost:8080/pdf"); //配置傳輸方式及地址
                                xhr.send(formData);
                                xhr.onreadystatechange = function () { //回調函數
                                };
                            }
                        });
                    }
            
                    //格式化圖片base64編碼轉換為byte文件流
                    function convertBase64UrlToBlob(urlData){
                        //去掉url的頭,并轉換為byte
                        var bytes=window.atob(urlData.split(',')[1]);
                        //處理異常,將ascii碼小于0的轉換為大于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()">//調用截圖方法即可

            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"); //獲取數據
                        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或者其他格式的文件。

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

            5 項目源碼地址

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

            到此這篇關于html轉pdf截圖保存功能的實現的文章就介紹到這了,更多相關html轉pdf截圖保存內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

            相關文章

            最新評論

            hao500彩票 www.lapremieredame.com:连州市| www.klinik-perkasa.com:胶州市| www.truthandrhetoric.com:沭阳县| www.mytrendwatch.com:谷城县| www.ccgyzh.com:抚顺县| www.appleidd.com:客服| www.laixi520.com:仁布县| www.dogfriendlyuk.com:迁西县| www.ccsql.com:通江县| www.nest180.com:绩溪县| www.edunestinstitute.com:资溪县| www.shiyanandkatharine.com:江源县| www.lidande.com:黎平县| www.storevalentine.com:阿城市| www.ohhiyo.com:淅川县| www.bodorseo.net:梓潼县| www.jlrkx.com:连山| www.concreteinanyform.com:仪征市| www.acoreder.com:南昌市| www.club-editeur-web.com:洮南市| www.hg345999.com:义乌市| www.ukvapez.com:五寨县| www.spaziotrearredamenti.com:东台市| www.gjbnc.cn:额济纳旗| www.toygrc.com:龙泉市| www.gparkin.com:宕昌县| www.cn-ourui.com:邯郸市| www.lucky-sevens.com:本溪| www.a-leap-of-faith.com:中山市| www.cp6990.com:西乌珠穆沁旗| www.13902948564.com:大同市| www.berthonkravtsova.com:梁河县| www.pebbapps.com:本溪市| www.v88v99.com:嘉禾县| www.xczc1.com:潼关县| www.xuiacona.com:张家港市| www.zamanbook.com:双峰县| www.communitydininghub.com:碌曲县| www.wzhxzhssls.com:伊宁县| www.mmm522.com:定边县| www.52gegegan.com:东宁县| www.ds1980.com:涞源县| www.4455hn.com:台南市| www.messinginaction.com:南和县| www.hornyhomepages.com:体育| www.77neo.com:红河县| www.aeroflex-cargo.com:尉犁县| www.anotherspace2.com:夹江县| www.danielelise.com:黑河市| www.offthechartslive.com:临汾市| www.blainebandboosters.org:伊宁县| www.inside-economics.com:拉萨市| www.tcslsoccer.org:阳高县| www.cleanhouselimpeza.com:萨迦县| www.bicaraperpustakaan.com:中牟县| www.modernimagelisam.com:井陉县| www.createhealthyhome.com:富民县| www.carrentalhurghada.com:霸州市| www.soxdeal.com:抚松县| www.yjkj1588.com:凌源市| www.m5687.com:乌拉特前旗| www.cocina-online.net:马鞍山市| www.jsjingming.com:平果县| www.mahomesearcher.com:巫溪县| www.suncity233.com:桂平市| www.cp7990.com:田林县| www.ships4ever.com:英山县| www.inkedcreatively.com:高邮市| www.zxqlw.cn:营山县| www.21toygame.com:安阳市| www.killdevilhillbrooklyn.com:云霄县| www.rhgda.com:武威市| www.jiechangjs.com:漳浦县| www.zuluanimazione.com:内丘县| www.20105129.com:长丰县| www.friendlyny.com:客服| www.chcdistribution.com:南召县| www.dongda-wood.com:石泉县| www.2012-oem-software.com:罗定市| www.eticketfiling.com:开远市| www.cz833.com:陕西省| www.theonlynetwork.com:海晏县| www.abstractionworks.com:大埔区| www.evbpower.com:开江县|