1. 首页
  2. 作者
  3. System
（已解决）jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
System
2024-08-13
所有,html



// 引入jsPDF和html2canvas库
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
 
// 导出HTML为PDF的函数
export const exportHtmlAsPdf = async (elementId, pdfFileName) => {
  // 创建一个jsPDF实例
  const pdf = new jsPDF('p', 'mm', 'a4');
  const element = document.getElementById(elementId);
  const options = {
    scale: 2, // 提高清晰度，根据需要调整
    logging: false,
    width: element.scrollWidth,
    height: element.scrollHeight,
    windowWidth: element.scrollWidth,
    windowHeight: element.scrollHeight,
    useCORS: true, // 允许跨域
  };
 
  // 使用html2canvas将HTML元素转换为canvas
  try {
    const canvas = await html2canvas(element, options);
    const imgData = canvas.toDataURL('image/png');
 
    // 将canvas图像添加到PDF中
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
 
    // 保存生成的PDF
    pdf.save(pdfFileName + '.pdf');
  } catch (error) {
    console.error('导出PDF时发生错误:', error);
  }
};

这段代码使用了html2canvas库来将HTML元素转换为canvas，并且使用了jspdf库来创建PDF文件。在转换过程中，我们可以通过调整scale参数来提高图像的清晰度，并且允许了图片的跨域使用。最后，我们保存了生成的PDF文件。这个解决方案可以有效地处理图片和表格在PDF中的展示问题，并且能够实现高清打印。

- 阅读更多 -
精美悬浮的岛屿动态错误页特效404单页HTML源码
System
2024-08-13
所有,html

这个问题似乎是在寻求一个动态的404错误页面的代码。这种页面可以用来提升用户体验，使得用户在访问一个不存在的页面时不会感到太过失望。以下是一个简单的HTML和JavaScript代码示例，用于创建一个动态的404错误页面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error 404 - Page Not Found</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .error-container {
            text-align: center;
        }
        .error-number {
            padding: 100px 0;
            font-size: 100px;
        }
        .error-message {
            font-size: 30px;
            color: #333;
        }
        .error-redirect {
            font-size: 20px;
            color: #999;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-number">404</div>
        <div class="error-message">Oops! That page can't be found.</div>
        <div class="error-redirect">
            We're redirecting you back to the homepage...
        </div>
    </div>
    <script>
        setTimeout(function() {
            window.location.href = 'http://yourwebsite.com'; // Replace with your homepage URL
        }, 3000);
    </script>
</body>
</html>

这段代码创建了一个简单的404错误页面，使用CSS进行样式设计，并通过JavaScript在3秒后将用户重定向到主页。这个示例提供了一个基本的错误页面设计，你可以根据自己的需求进行更多的样式和功能添加。

- 阅读更多 -
CSS linear-gradient 实现背景双色或多色，颜色渐变，颜色分明
System
2024-08-13
所有,css3

CSS 中的 linear-gradient 函数可以用来创建线性渐变背景，实现多种颜色的渐变效果。以下是一个实现双色渐变背景的例子：




.background-gradient {
  background-image: linear-gradient(to right, #FFC107, #FF5722);
}

在这个例子中，背景从左边的黄色(#FFC107)渐变到右边的红色(#FF5722)。

如果你想要实现多种颜色的渐变，可以在 linear-gradient 函数中添加更多的颜色值，并指定它们的位置。例如，三种颜色的渐变：




.background-gradient {
  background-image: linear-gradient(to right, #30CFD0 0%, #330867 100%);
}

在这个例子中，背景从左边的浅蓝色(#30CFD0)渐变到右边的深紫色(#330867)。

使用百分比可以精确控制每种颜色的范围：




.background-gradient {
  background-image: linear-gradient(to right, #30CFD0 0%, #631A77 50%, #330867 100%);
}

在这个例子中，背景首先从左边的浅蓝色(#30CFD0)开始，在中间变为深紫色(#631A77)，最后在右边结束为深紫色(#330867)。

- 阅读更多 -
css实现圆角三角形，圆角三角形的实现
System
2024-08-13
所有,css3

在CSS中，可以使用伪元素和border-radius属性来实现圆角三角形。以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角三角形</title>
<style>
  .rounded-triangle {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 100px 50px 0;
    border-color: transparent transparent transparent black;
    overflow: hidden;
  }
 
  .rounded-triangle:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px 0 0 0;
    background-color: black;
  }
</style>
</head>
<body>
 
<div class="rounded-triangle"></div>
 
</body>
</html>

这段代码会创建一个黑色的圆角三角形。border-radius属性设置了三角形边缘的圆角半径，使其看起来更像一个圆角三角形。伪元素::after用于创建一个带有圆角的黑色条带，从而形成一个圆角三角形的效果。

- 阅读更多 -
html下拉列表+网页更换背景实现的换肤功能
System
2024-08-13
所有,css3

以下是一个简单的HTML下拉列表和JavaScript代码示例，用于实现网页换肤功能：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>换肤功能示例</title>
<script>
function changeBackground(bgImage) {
    document.body.style.backgroundImage = "url('" + bgImage + "')";
}
</script>
</head>
<body>
 
<select onchange="changeBackground(this.value);">
    <option value="bg1.jpg">背景1</option>
    <option value="bg2.jpg">背景2</option>
    <option value="bg3.jpg">背景3</option>
</select>
 
</body>
</html>

在这个示例中，我们创建了一个带有三个背景选项的下拉列表。每当用户选择不同的背景时，changeBackground 函数会被调用，并将 body 元素的背景图像更改为用户选择的图片。这个简单的函数利用了onchange事件处理器来响应下拉列表的选择变化。

- 阅读更多 -
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
System
2024-08-13
所有,css3

CSS中的绝对定位(absolute)和相对定位(relative)是两种非常常用的定位方式。

绝对定位(absolute)：

绝对定位是一种较为复杂的定位方式，它会将元素从文档流中完全移除，然后使用top、right、bottom、left属性相对于最近的已定位（非 static）祖先元素进行定位。如果没有已定位的祖先元素，那么它的位置则相对于最初的包含块。




div.absolute {
  position: absolute;
  top: 50px;
  left: 100px;
}

在这个例子中，div将被定位到距离其最近的已定位祖先元素顶部50px、左侧100px的位置。如果没有已定位的祖先元素，它将相对于初始包含块定位。

相对定位(relative)：

相对定位是一种较为基础的定位方式，它不会将元素从文档流中移除，而是通过top、right、bottom、left属性相对于元素在文档流中的原始位置进行定位。




div.relative {
  position: relative;
  top: 50px;
  left: 100px;
}

在这个例子中，div将被向下移动50px、向右移动100px，但它仍然占据原来的空间。其他元素在div原位置被移除后会重新排列。

总结：

绝对定位是相对于最近的已定位（非 static）祖先元素进行定位，而相对定位是相对于元素在文档流中的原始位置进行定位。绝对定位会从文档流中移除元素，而相对定位不会。

- 阅读更多 -
使用Flex布局实现盒子的水平垂直居中
System
2024-08-13
所有,css3

在Flex布局中，要实现盒子的水平垂直居中，可以将容器的justify-content属性设置为center（水平居中）和align-items属性设置为center（垂直居中）。以下是一个简单的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">居中的盒子</div>
</div>

CSS:




.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 200px;           /* 容器高度 */
  border: 1px solid #000;  /* 边框，为了清晰地显示布局效果 */
}
 
.flex-item {
  width: 100px;   /* 盒子宽度 */
  height: 50px;   /* 盒子高度 */
  text-align: center; /* 文字水平居中 */
  line-height: 50px;  /* 行高与盒子高度相同，实现垂直居中 */
}

这段代码会创建一个高度为200px的flex容器，其中包含了一个宽度为100px、高度为50px的盒子，该盒子在容器中水平和垂直居中。

- 阅读更多 -
发光立方体效果 html+css
System
2024-08-13
所有,css3

要创建一个发光立方体效果，我们可以使用CSS3的3D转换和动画功能。以下是一个简单的示例代码：

HTML:




<div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
</div>

CSS:




.cube {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
  animation: glow 5s infinite alternate;
}
 
.side {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #ff0000;
  opacity: 0.5;
}
 
.front {
  transform: translateZ(50px);
}
 
.back {
  transform: translateZ(-50px);
}
 
.right {
  transform: rotateY(90deg) translateZ(50px);
}
 
.left {
  transform: rotateY(90deg) translateZ(50px);
}
 
.top {
  transform: rotateX(90deg) translateZ(50px);
}
 
.bottom {
  transform: rotateX(90deg) translateZ(50px);
}
 
@keyframes glow {
  0% {
    box-shadow: 0 0 10px #fff;
  }
  100% {
    box-shadow: 0 0 20px #ff0;
  }
}

这段代码创建了一个立方体，并通过@keyframes定义了一个名为glow的动画，使立方体持续发光。动画中立方体的光晕动画由白变为黄，模拟了发光效果。

- 阅读更多 -
css3实现旋转
System
2024-08-13
所有,css3

CSS3中实现元素的旋转，可以使用transform属性中的rotate()函数。

例如，要将一个元素旋转45度，可以这样写：




.rotated-element {
  transform: rotate(45deg);
}

在HTML中应用这个类：




<div class="rotated-element">这是一个旋转了的元素</div>

旋转的中心默认是元素的中心，如果需要改变旋转的中心，可以使用transform-origin属性。例如，将旋转中心设置为左上角：




.rotated-element {
  transform-origin: left top;
  transform: rotate(45deg);
}

旋转动画可以通过CSS动画实现：




@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.rotated-element {
  animation: rotateAnimation 2s linear infinite;
}

这段代码定义了一个名为rotateAnimation的关键帧动画，它从0度旋转至360度，持续时间为2秒，并且无限循环。

- 阅读更多 -
【CSS】使元素在父元素中居中显示的几种方法
System
2024-08-13
所有,css3

要使元素在父元素中居中显示，可以使用不同的CSS技术。以下是几种常用的居中方法：

  1. 使用Flexbox布局:



.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
 
.child {
  /* 子元素不需要额外样式 */
}
  1. 使用Grid布局:



.parent {
  display: grid;
  place-items: center; /* 水平垂直居中 */
}
 
.child {
  /* 子元素不需要额外样式 */
}
  1. 使用绝对定位和transform:



.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用margin:auto方法（适用于块级元素）:



.parent {
  position: relative;
}
 
.child {
  width: 50%; /* 需要指定宽度 */
  height: 50%; /* 需要指定高度 */
  margin: auto;
  position: absolute; /* 需要绝对定位 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

这些方法可以使元素在其父元素中水平和垂直居中，选择哪种方法取决于您的布局需求和浏览器兼容性要求。

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