<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.qyxc188.com:永兴县| www.bungalowsvicksol.com:三门县| www.zipcodeme.com:驻马店市| www.weijinying.com:大姚县| www.brandshoesbar.com:平顺县| www.microsatsymp.com:青岛市| www.themarie.org:阜南县| www.1jiazhuang.com:娱乐| www.youchenfood.com:黔江区| www.paulovarelahairspace.com:桑植县| www.krankgolfasia.com:崇明县| www.dictionarios.com:江北区| www.myearnedincome.com:冷水江市| www.tjshunma.com:荣成市| www.d0ob.com:平安县| www.chinazigong.com:稷山县| www.xiutyj.com:广宗县| www.crimson-room.net:蓬溪县| www.yyqmvip6.com:容城县| www.christaiceforest.com:克山县| www.cp3359.com:长丰县| www.tirlat.com:兴化市| www.romanyrestaurant.com:长汀县| www.lmpzw.cn:高碑店市| www.bjdkth.com:潞西市| www.m6828.com:大足县| www.hibiscus-cottages.com:刚察县| www.dghuayao.com:乳山市| www.608755.com:龙井市| www.doedoehuis.com:稷山县| www.amphorahandbags.com:津市市| www.southerncrossnat.com:南乐县| www.inhouse-outhouse.com:达拉特旗| www.elkinkiev.com:墨竹工卡县| www.18a1.com:永春县| www.arcondb.com:安宁市| www.helioshs.com:南木林县| www.actforourfuture.org:乡城县| www.rynhd.com:朔州市| www.lushundoors.com:仪陇县| www.teatreeoilusage.com:左权县| www.lesblives.com:柳林县| www.banchuan888.com:延吉市| www.0571-edu.com:常山县| www.esqqw.com:原平市| www.pnnws.com:仁怀市| www.sxhimac.com:仙居县| www.wedding-invites.net:桦川县| www.ift-expertise.com:澄城县| www.gazisozluk.org:吴川市| www.airsolution-group.com:宜昌市| www.hammerheadradio.com:白山市| www.kyriakosandkolette.com:雷山县| www.f9896.com:武乡县| www.guggamugga.com:双流县| www.687090.com:长治县| www.antonkropotkinsky.com:淮滨县| www.mabel-gray.com:大港区| www.thuebannhadat.net:临泉县| www.inretrospectweb.com:武夷山市| www.beroaf.com:盘锦市| www.szpuno.com:于都县| www.hg22773.com:浠水县| www.lovejaniethien.com:天水市| www.hirfigyelo.com:漾濞| www.pianfang120.com:靖州| www.wzjdsb.com:赤水市| www.heeeun.com:兴山县| www.tendainfo.com:方正县| www.laorenke.com:湄潭县| www.rzbangrong.com:曲阜市| www.0937xt.com:翼城县| www.maltavizesi.net:中西区| www.suntikputihdahlia.net:双牌县| www.051b.com:永仁县| www.fusion-mania.com:淄博市| www.anjiescl.com:凤凰县| www.luo18.com:永德县| www.heixiule.com:文水县| www.iidcs.com:张北县| www.animerica-extra.com:乐昌市| www.hiroshihawaii.com:中牟县| www.pd556.com:临江市| www.myearnedincome.com:闻喜县|