首页 > 其他分享 >多图片生成PDF(一)多图片生成HTML

多图片生成PDF(一)多图片生成HTML

时间:2022-12-08 18:00:13浏览次数:45  
标签:String track list li html PDF 生成 order 图片

多图片生成HTML
一、准备前提
1、准备一个html模板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>pdf</title>
    <link rel="stylesheet" href="./css/pdf.css" />
</head>

<body>

    <div class="box">
        <div class="img-box">
            ###image_list###
        </div>
    </div>
</body>
</html>

2、准备CSS模板(css模板网上找的)

@page { 
  size: 10.42in 8.12in; 
  margin: 0; 
  content: counter(page);
  width: 100%; 
  height: 100%; 
} /*不能随意修改这里 hongwei.lian*/
html,
body {
    margin: 0;
}

ul,
ol,
li,
img {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

.box {
    width: 100%;
    position: relative;
}

img {
    width: 100%;
}

.content-box {
    position: absolute;
    top: 230px;
    left: 100px;
    bottom: 150px;
    right: 30px;
}

.order-track .track-list {
    margin: 20px 10px;
    /* max-height: 300px; */
    padding-left: 5px;
    /* overflow-y: auto; */
    position: relative;
}

.box-track .track-list li:first-child {
    padding-top: 0;
}

.order-track .track-list li:first-child {
    padding-top: 0;
}

.order-track .track-list li {
    position: relative;
    padding: 9px 10px 0 15px;
    line-height: 22px;
    border-left: 1px solid #d9d9d9;
    color: #333;
    font-size: 0;
}

.order-track .track-list li:first-child .node-icon {
    background-position: 0 0;
    height: 20px;
    top: 0;
}

.order-track .track-list li .node-icon {
    position: absolute;
    left: -6px;
    top: 50%;
    width: 11px;
    height: 11px;
    background: url("../img/order-track.png") -21px -8px #fff no-repeat;
}

.order-track .track-list li:first-child .date {
    border-left-color: #fff;
}

.order-track .track-list li .date {
    display: inline-block;
    width: 150px;
    color: #333;
    border-radius: 14px;
    font-size: 14px;
    text-align: left;
}

.order-track .track-list li:first-child .txt {
    font-weight: 600;
}

.order-track .track-list li .txt {
    font-size: 14px;
    max-width: 80%;
    padding-left: 10px;
}

.order-track .track-list li .time,
.order-track .track-list li .txt {
    position: relative;
    display: inline-block;
}

.box-track .track-list .name {
    float: right;
    vertical-align: top;
    font-size: 14px;
    max-width: 80%;
    margin-right: 10px;
}

二、Java代码

import cn.qcdoc.common.core.exception.BaseException;

import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.List;

/**
 * Html
 *
 * @author: wx
 * @date: 2022/12/08
 */
public class HtmlDemo {
    public static String MakeHtml(List<String> listPath, String distPath, String templatePath){
        String fileame = "test.html";
        try {
            String templateContent = "";
            // 读取模板文件
            FileInputStream fileinputstream = new FileInputStream(templatePath);
            int length = fileinputstream.available();
            byte bytes[] = new byte[length];
            fileinputstream.read(bytes);
            fileinputstream.close();
            templateContent = new String(bytes);
            StringBuilder sbPath = new StringBuilder();
            for (String path : listPath) {
                String imgs = "<img src=\""+path+"\"/>"+"\n"+"<div style='page-break-before: always;'>\n" +
                        "\t\t</div>";
                sbPath.append(imgs);
            }
            String str = sbPath.toString().replace("\\", "/");
            //把模板页面上的 ###image_list### 替换成 img 里的内容
            templateContent = templateContent.replaceAll("###image_list###", str);
            // 生成的html文件保存路径。
            fileame = distPath + fileame;
            // 建立文件输出流
            FileOutputStream fileoutputstream = new FileOutputStream(fileame);
            byte tag_bytes[] = templateContent.getBytes();
            fileoutputstream.write(tag_bytes);
            fileoutputstream.close();
        } catch (Exception e) {
            throw new BaseException("创建html失败!");
        }
        return fileame;
    }

    public static void main(String[] args) throws Exception {
        List<String> listPath = new ArrayList<>();
        listPath.add("1665989812537.jpg");
        listPath.add("1665989815178.jpg");
        String distPath = "upload\\depot\\electronic\\23335\\NJ01TYQABYM\\";
        String templatePath = "upload\\depot\\table.html";
        MakeHtml(listPath,distPath,templatePath);
    }
}

生成示例入下图:
html代码:

总结:
以上生成HTML是基于本地生成,html里面的路径要写正常,否则打开html不会显示图片

接下来,将根据生成好的HTML生成PDF

标签:String,track,list,li,html,PDF,生成,order,图片
From: https://www.cnblogs.com/why0703/p/16966763.html

相关文章

  • swagger 接口文档转 pdf
    步骤1、先把swagger导出swagger.json文件2、windows目录挂载注意下,比如windows目录D:\swagger得写成/D/swagger,swagger.json文件放在D:\swagger目录下,执行......
  • 图片的拖动
      <div   @mousedown="imgMove"   id="imgRef"   ref="imgRef"   class="full-heightfull-widthimg-style"   style="position:......
  • canvas导出图片方法总结
    1.直接调用canvas对象的toDataURL方法转化为指定类型varnewImg=newImage();newImg.src=canvas.toDataURL("image/png"));2.利用canvas对象的toBlob方法https://de......
  • 阿里云OSS图片上传压缩
    pom文件增加图片压缩依赖包<!--图片压缩--><dependency><groupId>net.coobird</groupId><artifactId>thumbnailator</artifactId><vers......
  • 用pageOffice控件实现 office word文档在线另存为pdf的功能
    用pageOffice控件实现officeword文档在线另存为pdf的功能1应用场景OA办公中,经常要将word文档转存为pdf方法,方式文档的查看。怎么实现word文档的转存为pdf呢?2实现方......
  • SourceGenerator 使用姿势(1):生成代理类,实现简单的AOP
    SourceGenerator已经出来很久了,也一直在关注。之前观摩大佬 xljiulang 的 WebApiClient 使用SourceGenerator生成接口代理类,深受启发,准备拿过来用看看(发出白嫖的声......
  • app直播源码,js实现上传图片类型+大小+尺寸验证
    app直播源码,js实现上传图片类型+大小+尺寸验证html代码: <inputtype="file"name="files"id="file"onchange="verificationPicFile(this)">​js代码: //图片类型......
  • 直播商城系统源码,点击按钮 保存页面为图片到本地
    直播商城系统源码,点击按钮保存页面为图片到本地首先写一个按钮创建事件 <buttonclass="info"@click="capture()">点击保存我哦~</button> ​然后把点击事件写上......
  • 快速生成Vue2模板
    1.点击文件,再点击首选项,然后选择用户片段; 2.在弹出来的输入框中,选择第一行vue.json或者第二行新建全局代码片段文件都可,都是为了打开vue.json文件;  3.显示这种情......
  • 给PDF加密码真的是安全的吗,这里告诉你真相!
    PDF加密的原理所谓的PDF加密,就是给您的PDF文件加一个密码保护,其他人打开的时候,需要输入密码,那它具体是什么做的呢,我们来看看吧!PDF加密的算法简介RC4是对称流密码(即,可以......