分类前端技术下的文章

vue二维码生成插件qrcodejs2-fix、html生成图片插件html2canvas、自定义打印内容插件print-js的使用及问题总结

2024-08-13




// 引入Vue
import Vue from 'vue';
// 引入组件
import { qrcode } from 'qrcodejs2-fix';
import html2canvas from 'html2canvas';
 
// 注册Vue全局指令，用于生成二维码
Vue.directive('qrcode', {
  inserted: function (el, binding) {
    let content = binding.value;
    let qrcodeElement = el.querySelector('.qrcode');
    if (content && qrcodeElement) {
      qrcode.toCanvas(content, qrcodeElement);
    }
  }
});
 
// 自定义打印函数
function printContent(selector) {
  const element = document.querySelector(selector);
  html2canvas(element).then(canvas => {
    const printWindow = window.open('', '_blank');
    printWindow.document.write(canvas.outerHTML);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
  });
}
 
// 使用示例
new Vue({
  el: '#app',
  data: {
    qrcodeContent: 'https://www.example.com'
  },
  methods: {
    printQRCode() {
      this.$nextTick(() => {
        printContent('#printSection');
      });
    }
  }
});

这个代码示例展示了如何在Vue应用中注册一个全局指令来生成二维码，并使用html2canvas将指定DOM内容转换为图片，然后在新窗口中打开并执行打印操作。这是一个简化的实现，去除了一些非核心功能，如错误处理等。

System

2024-08-13

所有,html




import com.itextpdf.html2pdf.HtmlConverter;
import com.itextpdf.html2pdf.resolver.image.ImageDataFactory;
import com.itextpdf.kernel.font.PdfFontFactory;
import com.itextpdf.layout.element.List;
import com.itextpdf.layout.property.UnitValue;
import com.itextpdf.licensing.base.LicenseKey;
import com.itextpdf.styledxmlparser.css.media.MediaDeviceDescription;
import com.itextpdf.styledxmlparser.css.media.MediaType;
import com.itextpdf.kernel.pdf.PdfWriter;
import com.itextpdf.layout.Document;
import com.itextpdf.layout.element.IBlockElement;
import com.itextpdf.layout.element.IElement;
import com.itextpdf.layout.property.TextAlignment;
import com.itextpdf.layout.element.Paragraph;
 
import java.io.*;
import java.util.ArrayList;
import java.util.List;
 
public class PdfGenerator {
    public static void main(String[] args) throws IOException {
        String htmlContent = "<html><body><p>你好，这是PDF生成示例。</p><img src='image.jpg' /></body></html>";
        String pdfFilePath = "output.pdf";
 
        LicenseKey.loadLicenseFile("E:/workspace/itextkey.xml"); // 加载itext的授权文件
        PdfWriter writer = new PdfWriter(pdfFilePath);
        // 设置中文字体
        String fontPath = "E:/workspace/simsun.ttc";
        PdfFontFactory.register(fontPath);
        MediaDeviceDescription mediaDeviceDescription = new MediaDeviceDescription(MediaType.PRINT);
        List<IElement> elements = HtmlConverter.convertToElements(htmlContent, mediaDeviceDescription);
 
        // 解决中文不显示的问题
        for (IElement element : elements) {
            if (element instanceof List) {
                List list = (List) element;
                for (ListLabel label : list.getListItems()) {
                    for (IBlockElement blockElement : label.getBlockElements()) {
                        processElement(blockElement);
                    }
                }
            } else {
                processElement(element);
            }
        }
 
        // 解决图片不显示的问题
        Document document = new Document(writer);
        for (IElement element : elements) {
            if (element instanceof IBlockElement && "img".equals(((IBlockElement) element).getPropertyAsString(HtmlConverter.PROPERTY_TAG))) {
                String imageUrl = ((IBlockElement) element).getPropertyAsString(HtmlConverter.PROPERTY_SRC);
                InputStream imageStream = new FileInputStream(imageUrl);

- 阅读更多 -

python制作超炫流星雨表白,html写流星雨(完整代码)

System

2024-08-13

所有,html

以下是一个简单的HTML和JavaScript代码示例，用于创建流星雨效果。你可以将这段代码保存为HTML文件，并通过浏览器打开查看效果。




<!DOCTYPE html>
<html>
<head>
    <title>流星雨</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
 
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const W = window.innerWidth;
        const H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
 
        let particles = [];
        let particleCount = 200;
 
        function init() {
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
            animate();
        }
 
        function animate() {
            ctx.clearRect(0, 0, W, H);
            for (let i = 0; i < particleCount; i++) {
                let p = particles[i];
                p.draw();
                p.update();
            }
            requestAnimationFrame(animate);
        }
 
        function Particle() {
            this.x = Math.random() * W;
            this.y = Math.random() * H;
            this.vx = -.5 + Math.random();
            this.vy = -.5 + Math.random();
            this.size = Math.random() * 2;
            this.life = 1;
 
            this.draw = function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
            }
 
            this.update = function() {
                this.x += this.vx * 5;
                this.y += this.vy * 5;
                if (this.x > W || this.x < 0) this.vx *= -1;
                if (this.y > H || this.y < 0) this.vy *= -1;
            }
        }
 
        init();
    </script>
</body>
</html>

这段代码会在页面上创建一个canvas元素，并用JavaScript实现流星雨的效果。你可以根据需要调整particleCount来改变雨中星星的数量，以及通过调整颜色和大小来自定义样式。

- 阅读更多 -

HTML中的6种空格标记

System

2024-08-13

所有,html

HTML中的6种空格字符是：

普通空格：（在键盘上按下空格键产生）
不断空格：&ensp;（en space）
半方大的空格：&emsp;（em space）
四分之一空间空格： （thin space）
不可断空格： （non-breaking space）
中文字符空格：　（中文全角空格字符）

以下是每种空格的HTML实体代码示例：




普通空格： a b<br>
不断空格： a&ensp;b<br>
半方大的空格： a&emsp;b<br>
四分之一空间空格： a&thinsp;b<br>
不可断空格： a&nbsp;b<br>
中文字符空格： a&#x3000;b

在HTML中使用时，只需将相应的代码插入到需要空格的地方即可。

- 阅读更多 -

【带给你不一样的思路】纯 CSS + HTML 实现几个好看的案例

System

2024-08-13

所有,html

以下是几个使用纯 CSS 和 HTML 实现的简单示例，展示了不同的视觉效果和布局技巧。

简单的三栏布局：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple 3-Column Layout</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .column {
    flex: 1;
    margin: 10px;
    padding: 15px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
  }
</style>
</head>
<body>
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>
</body>
</html>

带有渐变背景的圆形按钮：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Button with Gradient</title>
<style>
  .button {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: background 0.5s ease;
  }
  .button:hover {
    background: linear-gradient(to right, #330867 0%, #30cfd0 100%);
  }
</style>
</head>
<body>
<div class="button">Button</div>
</body>
</html>

创建一个简单的下拉菜单：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Dropdown Menu</title>
<style>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content a:hover {background-color: #f1f1f1;}
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
 
<ul>
  <li class="dropdown">
    <a href="#">Dropdow

- 阅读更多 -

一段arcgisapi小组件的html

System

2024-08-13

所有,html

由于您没有提供具体的ArcGIS API for JavaScript小部件的HTML代码，我无法提供针对特定代码的解决方案。但是，我可以提供一个通用的ArcGIS API for JavaScript小部件的HTML代码示例，这是一个地图小部件，用于显示默认的地图视图。




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS API for JavaScript 地图示例</title>
    <style>
        html, body, #viewDiv {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require([
            "esri/Map", 
            "esri/views/MapView"
        ], function(Map, MapView) {
            var map = new Map({
                basemap: "streets"
            });
 
            var view = new MapView({
                container: "viewDiv", 
                map: map, 
                center: [-122.45, 37.75], // 西经-122.45，纬度37.75
                zoom: 13 // 缩放级别
            });
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>

在这个例子中，我们创建了一个地图视图，并将其放置在id为viewDiv的DOM元素中。我们使用了ArcGIS API for JavaScript的Map和MapView类来实现地图的初始化和渲染。这个代码段提供了一个基本的地图展示，你可以将其作为创建更复杂小部件的起点。

- 阅读更多 -

【Flex】利用flex布局一个九宫格

System

2024-08-13

所有,css3

在Flex中，可以使用mx:Tile容器来创建一个九宫格。以下是一个简单的示例代码：




<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
 
    <mx:Tile width="100%" height="100%">
        <mx:Tile width="100%" height="100%" rowCount="3" columnCount="3">
            <mx:Image source="image1.png" />
            <mx:Image source="image2.png" />
            <mx:Image source="image3.png" />
            <mx:Image source="image4.png" />
            <mx:Image source="image5.png" />
            <mx:Image source="image6.png" />
            <mx:Image source="image7.png" />
            <mx:Image source="image8.png" />
            <mx:Image source="image9.png" />
        </mx:Tile>
    </mx:Tile>
</s:Application>

在这个例子中，最外层的Tile容器负责整体的网格布局，内层的Tile容器定义了子项的排列方式（这里假设使用了9张图片作为子项）。每个Image控件都将填充其对应的格子。你需要确保替换source属性的值为你实际想要使用的图片路径。

注意：mx命名空间提供的控件主要是Flex 3和Flex 4的经典样式控件。Flex 4.5及以上版本，建议使用spark控件，如s:Image代替mx:Image，并使用其他spark容器如s:Tile代替mx:Tile。

- 阅读更多 -

HTML的＜select＞标签：创建下拉列表选择框的完整指南

System

2024-08-13

所有,html

在HTML中，<select>标签用于创建下拉列表选择框。下面是如何使用<select>标签创建一个简单的下拉列表的例子：




<!DOCTYPE html>
<html>
<head>
<title>下拉列表示例</title>
</head>
<body>
 
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
 
</body>
</html>

在这个例子中，<select>标签定义了下拉列表框，其中包含几个<option>标签，每个标签代表下拉列表中的一个选项。value属性是提交表单时选项的值，而标签内的文本是用户看到的选项描述。

要使用JavaScript获取选中的选项值，可以这样做：




document.getElementById('cars').value;

这将返回被选中选项的value属性值。如果你需要在用户改变选择时做出响应，可以添加事件监听器：




document.getElementById('cars').addEventListener('change', function() {
  var selectedValue = this.value;
  // 在这里处理选中的值
});

这样，每当用户改变选择时，你都可以执行一些代码来响应这个变化。

- 阅读更多 -

Web前端界面开发基础，Vue3的学习记录，HTML常用的五种标签

System

2024-08-13

所有,html

在Vue3中，HTML的五种常用标签包括<h1>到<h6>，表示标题，<p>表示段落，<a>表示超链接，<div>表示区块，<span>表示行内元素。

以下是一个简单的Vue3组件示例，展示了这五种标签的使用：




<template>
  <div>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
 
    <p>这是一个段落。</p>
 
    <a href="https://www.example.com">这是一个超链接</a>
 
    <div>这是一个div区块</div>
 
    <span>这是一个span行内元素</span>
  </div>
</template>
 
<script>
export default {
  name: 'BasicTagsExample'
}
</script>
 
<style>
/* 可以添加一些样式 */
h1 {
  color: blue;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
</style>

在这个例子中，我们定义了一个Vue3组件，展示了如何使用这五种HTML标签，并附上简单的样式。这些标签和样式是任何Web前端项目的基础构建块。

System

2024-08-13

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>Java后端接口调用示例</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://你的后端接口地址', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            };
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">获取数据</button>
</body>
</html>

在这段代码中，我们创建了一个简单的HTML页面，其中包含了一个按钮。当用户点击这个按钮时，会触发fetchData函数，该函数使用XMLHttpRequest对象向指定的Java后端接口发送GET请求，并在收到响应后将响应的文本输出到浏览器的控制台。

请注意，你需要将http://你的后端接口地址替换为实际的Java后端服务接口地址。此外，如果你的后端接口需要跨域请求，你可能需要配置CORS（跨源资源共享）以允许你的前端应用程序进行请求。

- 阅读更多 -