1. 首页
  2. 分类
  3. 前端技术
Java通过Html(ftl模板)生成PDF实战, 可支持商用
System
2024-08-13
所有,html



import com.itextpdf.html2pdf.HtmlConverter;
import com.itextpdf.kernel.pdf.PdfDocument;
import com.itextpdf.kernel.pdf.PdfWriter;
import com.itextpdf.kernel.pdf.WriterProperties;
import com.itextpdf.layout.element.IBlockElement;
import com.itextpdf.layout.property.UnitValue;
import com.itextpdf.licensing.base.LicenseKey;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
 
import java.io.*;
import java.util.HashMap;
import java.util.Map;
 
public class PdfGenerationUtil {
 
    public static void main(String[] args) throws IOException, TemplateException {
        // 设置FreeMarker配置
        Configuration cfg = new Configuration(Configuration.VERSION_2_3_28);
        cfg.setClassForTemplateLoading(PdfGenerationUtil.class, "/templates");
        cfg.setDefaultEncoding("UTF-8");
 
        // 创建数据模型
        Map<String, Object> dataModel = new HashMap<>();
        dataModel.put("name", "iText");
 
        // 加载FreeMarker模板
        Template template = cfg.getTemplate("example.ftl");
 
        // 将模板与数据模型合并
        Writer out = new StringWriter();
        template.process(dataModel, out);
        String htmlContent = out.toString();
 
        // 初始化iText库的商业许可证
        LicenseKey.loadLicenseFile("path/to/itextkey.xml");
 
        // 将HTML转换为PDF
        PdfWriter writer = new PdfWriter("output.pdf", new WriterProperties().setPdfVersion(PdfWriter.PDF_2_0));
        PdfDocument pdfDoc = new PdfDocument(writer);
        pdfDoc.setDefaultPageSize(new PageSize(PageSize.A4).rotate());
 
        // 解决HTML中的图片路径问题
        HtmlConverter.convertToPdf(htmlContent, pdfDoc, new ResourceProvider());
 
        // 关闭文档
        pdfDoc.close();
        writer.close();
    }
 
    // 自定义的ResourceProvider用于解决图片路径问题
    public static class ResourceProvider implements IResourceProvider {
        @Override
        public boolean isResourceAvailable(String resourceName) {
            // 实现逻辑检查资源是否可用
            return false;
        }
 
        @Override
        public InputStream getResourceStream(String resourceName) throws IOException {
            // 实现逻辑获取资源输入流
            return null;
        }
    }
}

这个代码实例展示了如何使用FreeMarker模板引擎生成HTML内容，并使用iText 7的HtmlConverter类将HTML转换为PDF。代码中包含了初始化iText商业许可证的关键步骤，并且提供了一个简单的ResourceProvider实现来解决HTML中图片资源的路径问题。这个实例可以作为开发者在实际项目中生成带有复杂布局和多媒体内容的PDF文档的参考。

- 阅读更多 -
【前端】从零开始学习编写HTML
System
2024-08-13
所有,html

创建一个简单的HTML文件可以使用任何文本编辑器，以下是一个基本的HTML文档的例子：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>
  1. <!DOCTYPE html> 声明这是一个HTML5文档。
  2. <html> 标签包含整个网页的内容。
  3. <head> 标签包含了文档的元数据，如 <title> 标签定义了网页的标题，<meta> 标签定义了文档的字符编码和视图端设置。
  4. <title> 标签中的文本会显示在浏览器的标题栏。
  5. <body> 标签包含了用户可见的所有内容，如 <h1> 标签定义了一个大标题，<p> 标签定义了一个段落。

将这段代码保存为 .html 文件，并使用浏览器打开，你就可以看到一个基本的网页。

- 阅读更多 -
java将html转成图片
System
2024-08-13
所有,html

Java将HTML转成图片的实现方法有以下几种：

  1. 使用第三方库（例如Flying Saucer、Thymeleaf等）：这些库可以将HTML转换成PDF，再将PDF转换成图片。首先，使用库读取HTML文件或字符串，然后生成PDF文件，最后将PDF转换成图片。这种方法的优点是简单易用，但需要引入额外的库。

    示例代码（使用Flying Saucer）：




String htmlContent = "<html><body>Hello, World!</body></html>";
DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
Document document = builder.parse(new ByteArrayInputStream(htmlContent.getBytes()));
 
String outputFilePath = "output.pdf";
 
ITextRenderer renderer = new ITextRenderer();
renderer.setDocument(document, null);
renderer.layout();
 
OutputStream outputStream = new FileOutputStream(outputFilePath);
renderer.createPDF(outputStream);
outputStream.close();
 
// 将PDF转换成图片，具体步骤可参考第二种方式

  1. 使用Java的Graphics2D类创建图形上下文并渲染HTML：这种方法将HTML解析成Document对象，然后使用Graphics2D类的绘制方法直接渲染成图片。需要逐个元素解析HTML，根据标签类型创建相应的图形对象并绘制到Graphics2D上下文上。这种方法的优点是不依赖第三方库，但需要手动解析HTML和处理标签。

    示例代码：




String htmlContent = "<html><body><h1>Hello, World!</h1></body></html>";
DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
Document document = builder.parse(new ByteArrayInputStream(htmlContent.getBytes()));
 
String outputFilePath = "output.png";
int width = 400; // 图片宽度
int height = 300; // 图片高度
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D graphics = image.createGraphics();
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
graphics.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
graphics.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);
graphics.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
 
// 渲染HTML到Graphics2D上下文
// 遍历HTML文档树的节点并根据节点类型进行相应的绘制操作
// ...
 
// 将Graphics2D上下文绘制到图片并保存
ImageIO.write(image, "png", new File(outputFilePath));

  1. 使用JavaFX的WebView组件：这种方法使用JavaFX的WebView来加载HTML内容，并将其渲染成图片。首先，创建一个WebView组件并指定其宽度和高度，然后加载HTML内容。最后，使用WebView的snapshot方法将WebView内容快照转换成图片。需要注意的是，该方法需要在JavaFX环境中运行。

    示例代码：




String htmlContent = "<html><body><h1>Hello, World!</h1></body></html>";
 
// 创建JavaFX的WebView组件
WebView webView = new WebView();
webView.setMinSize(400, 300);
webView.setMaxSize(400, 300);
 
// 加载HTML内容
webView.getEngine().loadContent(htmlContent);
 
// 将WebView内容快照转换成图片
WritableImage snapshot = webView.snapshot(null, null);
String outputFilePath = "output.png";
ImageIO.write(SwingFXUtils.fromFXImage(snapshot, null), "png", new File(outputFilePath));

这些方法都提供了将HTML转换成图片的实现方式，每种方式都有其适用范围和侧重点，根据具体需求选择合适的方法。

- 阅读更多 -
CSS span标签中文字水平垂直对齐
System
2024-08-13
所有,css3

要实现span标签中的中文文本水平垂直对齐，可以使用CSS的display: flex和align-items以及justify-content属性。以下是实现这一效果的CSS代码示例：




span.align-center {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100px; /* 设置一个宽度 */
  height: 100px; /* 设置一个高度 */
  border: 1px solid #000; /* 边框仅为了展示效果 */
}

接下来是HTML代码：




<span class="align-center">文本</span>

这段代码会在span元素中创建一个100x100像素的框，并将其中的文本水平和垂直居中。

- 阅读更多 -
HTML5 CSS3 专题 ：诱人的实例 3D展示商品信息
System
2024-08-13
所有,css3

以下是一个简单的HTML和CSS代码示例，展示如何使用HTML5和CSS3创建一个3D呈现的商品信息卡片：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Product Card</title>
<style>
  .product-card {
    width: 200px;
    height: 260px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    perspective: 1000px;
  }
 
  .product-card .face {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
  }
 
  .product-card .face.back {
    transform: rotateY(180deg);
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
  }
 
  .product-card .face.front {
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }
 
  .product-card .face.front img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
 
  .product-card .face.front .info {
    padding: 10px;
  }
 
  .product-card:hover .face {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
 
<div class="product-card">
  <div class="face front">
    <img src="product-image.jpg" alt="Product Image">
    <div class="info">
      <p>Product Name</p>
      <p>$99.99</p>
    </div>
  </div>
  <div class="face back">
    Description of the product goes here.
  </div>
</div>
 
</body>
</html>

这个示例使用了CSS3的perspective和transform属性来创建3D效果，并使用:hover伪类来触发卡片翻转的动画。这个简单的3D卡片可以作为学习如何制作类似效果的起点。

- 阅读更多 -
Flex弹性布局
System
2024-08-13
所有,css3

Flex布局是CSS布局的一种新方式，它可以简化布局过程，让开发者更容易地创建灵活的布局。Flex布局提供了一种灵活的方式来对容器内的项进行排列、对齐和分配空间。

以下是一些Flex布局的基本概念和代码示例：

  1. 使用Flex布局：



.container {
  display: flex; /* 或者 inline-flex */
}
  1. 在Flex容器中设置主轴方向（默认水平）：



.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  1. 设置项在主轴上的对齐方式：



.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  1. 设置项在交叉轴上的对齐方式：



.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  1. 设置项在交叉轴上的对齐方式（多行）：



.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  1. 设置项是否可以伸缩：



.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
  1. 设置项的序号（排列顺序）：



.item {
  order: <integer>;
}
  1. 设置项在交叉轴方向上的对齐：



.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Flex布局是一种强大的工具，可以用来创建复杂的布局，而无需使用多个嵌套的HTML元素或复杂的CSS技巧。以上代码示例提供了Flex布局的基本概念和使用方法，有助于开发者快速理解并应用这一布局技术。

- 阅读更多 -
CSS左右摆动动效
System
2024-08-13
所有,css3

要实现一个简单的CSS左右摆动动效，可以使用@keyframes规则来定义动画，并使用animation属性应用到元素上。以下是一个实现左右摆动效果的例子：




/* 定义动画 */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
 
/* 应用动画 */
.slider {
  animation: slide 1s infinite alternate;
}



<!-- 应用动画的HTML元素 -->
<div class="slider">我将会左右摆动！</div>

在这个例子中，.slider类定义了一个动画，名为slide，它将元素从当前位置向右移动100像素，动画持续时间为1秒，并且设置为无限次数循环（infinite），且每次动画完成后都会反向播放（alternate）。

- 阅读更多 -
vue左右滑动切换页面带上动画
System
2024-08-13
所有,css3

在Vue中实现左右滑动切换页面并带有动画效果，可以使用vue-awesome-swiper插件。以下是一个简单的例子：

  1. 首先安装vue-awesome-swiper：



npm install vue-awesome-swiper --save
  1. 在Vue组件中使用vue-awesome-swiper：



<template>
  <swiper :options="swiperOptions">
    <swiper-slide>
      <div class="slide-content">页面1</div>
    </swiper-slide>
    <swiper-slide>
      <div class="slide-content">页面2</div>
    </swiper-slide>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>
 
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
 
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        // 动画选项
        effect: 'slide', // 切换效果，默认是slide
        speed: 500, // 切换速度
        // 其他配置项...
      }
    };
  }
};
</script>
 
<style>
.slide-content {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在这个例子中，我们使用了vue-awesome-swiper的swiper组件和swiper-slide组件来创建滑块，并通过options属性配置了动画效果。你可以根据需要调整effect属性来更改动画类型，例如改为fade实现淡入淡出效果。

- 阅读更多 -
HTML中将盒子居中的办法
System
2024-08-13
所有,css3

在HTML中，可以使用CSS来使盒子居中。以下是几种常用的方法：

  1. 使用flexbox居中:



<!DOCTYPE html>
<html>
<head>
<style>
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full height of the viewport */
}
</style>
</head>
<body>
 
<div class="center-flex">
  <div>居中的盒子</div>
</div>
 
</body>
</html>
  1. 使用absolute position和transform居中:



<!DOCTYPE html>
<html>
<head>
<style>
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
 
<div class="center-absolute">居中的盒子</div>
 
</body>
</html>
  1. 使用grid居中:



<!DOCTYPE html>
<html>
<head>
<style>
.center-grid {
  display: grid;
  place-items: center;
  height: 100vh; /* Full height of the viewport */
}
</style>
</head>
<body>
 
<div class="center-grid">
  <div>居中的盒子</div>
</div>
 
</body>
</html>

选择哪种方法取决于您的具体需求和对浏览器兼容性的要求。

- 阅读更多 -
vue3 卸载重装ant-design-Vue
System
2024-08-13
所有,css3

在Vue 3中卸载和重装ant-design-vue，你可以按照以下步骤操作：

  1. 卸载当前安装的ant-design-vue：



npm uninstall ant-design-vue
# 或者使用yarn
yarn remove ant-design-vue
  1. 清除可能存在的缓存：



npm cache clean --force
  1. 重新安装ant-design-vue：



npm install ant-design-vue@next
# 或者使用yarn
yarn add ant-design-vue@next

请注意，ant-design-vue目前正处于迁移到Vue 3的过渡期，因此在安装时需要指定@next标签以获取支持Vue 3的版本。

确保在你的Vue 3项目中正确地配置了ant-design-vue。例如，如果你使用的是完整导入，你需要在你的入口文件（通常是main.js或main.ts）中这样配置：




import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
 
const app = createApp(App);
 
app.use(Antd);
 
app.mount('#app');

如果你只需要按需导入部分组件，你可以使用babel-plugin-import插件来实现：




{
  "plugins": [
    [
      "import",
      {
        "libraryName": "ant-design-vue",
        "libraryDirectory": "es",
        "style": true // 载入`ant-design-vue`的样式文件
      }
    ]
  ]
}

这样，你就可以在需要的组件中按需导入：




import { Button, Select } from 'ant-design-vue';
 
export default {
  components: {
    'a-button': Button,
    'a-select': Select
  }
}

确保你的项目配置与ant-design-vue的使用要求相匹配。如果在重装过程中遇到任何问题，请检查你的项目依赖版本和ant-design-vue的版本是否兼容，并查看官方文档以获取最新的安装指南。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号