标签 Javascript 下的文章

2024-08-15

要将数组中具有相同属性的对象合并到一起，可以使用reduce方法来累计结果。以下是一个示例代码：




function mergeSimilarObjects(arr, key) {
  return arr.reduce((acc, obj) => {
    const existingObj = acc.find(item => item[key] === obj[key]);
    if (existingObj) {
      // 合并对象，这里以合并除`key`之外的属性为例
      Object.keys(obj).forEach(prop => {
        if (prop !== key) {
          existingObj[prop] = (existingObj[prop] || 0) + (obj[prop] || 0);
        }
      });
    } else {
      acc.push(obj);
    }
    return acc;
  }, []);
}
 
// 示例数组和属性
const array = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 1, name: 'Alice', age: 28 },
  { id: 3, name: 'Charlie', age: 35 }
];
 
// 使用mergeSimilarObjects函数
const result = mergeSimilarObjects(array, 'id');
 
console.log(result);
// 输出: [ { id: 1, name: 'Alice', age: 53 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 } ]

在这个例子中，mergeSimilarObjects函数接受一个数组arr和一个用于比较对象相似性的键key。函数会找到具有相同key值的对象，并合并它们的属性（除了key本身）。如果没有找到相同的对象，则将当前对象加入结果数组。

System

2024-08-15

所有,javascript




// 引入pdf-annotate.js库
const { PdfApi } = require('pdf-annotate.js');
 
// 创建PDFAPI实例
const pdf = new PdfApi();
 
// 加载PDF文件
pdf.loadPDF('path/to/document.pdf');
 
// 添加文本注释
pdf.addAnnotation({
  type: 'text', // 注释类型
  pageNumber: 1, // 页码
  x: 100, // x坐标
  y: 100, // y坐标
  content: '这是一个文本注释' // 注释文本
});
 
// 添加高亮注释
pdf.addAnnotation({
  type: 'highlight', // 注释类型
  pageNumber: 2, // 页码
  x: 200, // x坐标
  y: 200, // y坐标
  width: 100, // 宽度
  color: '#ffff00' // 颜色
});
 
// 保存更新后的PDF
pdf.savePdf('path/to/updated_document.pdf');

这个例子展示了如何使用pdf-annotate.js库来加载一个PDF文档，添加文本注释和高亮注释，并最终将修改后的文档保存起来。这个库非常适合需要在Web应用程序中添加注释功能的开发者。

- 阅读更多 -

js解决pdf使用iframe打印报跨域错误问题

System

2024-08-15

所有,javascript

跨域错误通常发生在尝试从不同的域（域名、协议或端口不同）加载资源时。在这种情况下，你可能在尝试通过iframe嵌入一个PDF文件，而该PDF文件与你的网页不同源。

为了解决这个问题，你可以考虑以下几种方法：

CORS设置：如果PDF文件的服务器支持跨源资源共享（CORS），你可以配置服务器以允许你的网页域进行资源共享。
代理服务：在你自己的服务器上创建一个代理服务，该服务可以请求PDF文件并返回它，从而避免跨域问题。
PDF.js库：使用PDF.js等客户端PDF处理库直接在客户端加载和渲染PDF，而不是通过iframe。

以下是使用代理服务的简单示例：

假设你有一个API端点/proxy-pdf，它可以在服务器端获取PDF文件并返回。




// 前端JavaScript代码
const iframe = document.createElement('iframe');
iframe.style.display = 'none'; // 确保iframe不可见
iframe.onload = function() {
  // iframe加载完成后，可以将iframe中的PDF内容打印出来
  const printWindow = iframe.contentWindow;
  printWindow.print();
};
iframe.src = '/proxy-pdf?url=' + encodeURIComponent('http://example.com/pdf-file.pdf');
document.body.appendChild(iframe);




// 服务器端代码（示例使用Node.js和Express）
const express = require('express');
const axios = require('axios');
const app = express();
 
app.get('/proxy-pdf', async (req, res) => {
  const pdfUrl = req.query.url;
  const response = await axios({
    url: pdfUrl,
    responseType: 'stream',
  });
  res.setHeader('Content-Type', 'application/pdf');
  response.data.pipe(res);
});
 
app.listen(3000);

确保服务器正确配置以允许跨域请求，并且客户端有权获取代理后的PDF文件。这样，当用户尝试打印时，实际上是在打印服务器端获取的PDF文件，从而避免了跨域问题。

- 阅读更多 -

w7安装高版本nodejs

System

2024-08-15

所有,javascript

在Windows 7上安装较新版本的Node.js，您需要确保您的操作系统支持该版本。以下是安装Node.js的步骤：

访问Node.js官网下载页面：Node.js Downloads
选择Windows系统对应的版本（32位或64位）。
下载.msi安装程序。
运行下载的.msi文件开始安装过程。
按照安装向导的指示完成安装。

如果您需要特定版本的Node.js，而不是最新版本，您可以在Node.js的发布页面找到旧版本的下载链接。

请注意，Windows 7是一个较旧的操作系统版本，它的支持生命周期已经结束，因此，在使用Node.js时，您可能会面临安全风险。考虑升级到更新的操作系统版本。

- 阅读更多 -

HTML学习使用js给html页面全屏水印

System

2024-08-15

所有,javascript

在HTML页面中使用JavaScript添加全屏水印可以通过以下步骤实现：

创建一个全屏的div元素，并设置其样式以覆盖整个页面。
在这个div中添加水印文字，可以通过CSS样式设置文字透明度和位置使其看起来像水印。
将这个div添加到页面的body中。

以下是实现全屏水印的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏水印示例</title>
<style>
  .watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 50px;
  }
</style>
</head>
<body>
<div id="watermark-container"></div>
<script>
  // 创建水印div
  var watermarkDiv = document.createElement('div');
  watermarkDiv.className = 'watermark';
  watermarkDiv.innerText = '水印文字';
 
  // 将水印div添加到页面中
  var body = document.body;
  body.appendChild(watermarkDiv);
</script>
</body>
</html>

在这个例子中，.watermark 类定义了全屏水印的样式，包括透明度、位置、大小和文字信息。JavaScript 创建了一个div元素并设置其类名和文字内容，然后将其添加到body中。这样就实现了全屏水印的效果。

- 阅读更多 -

前端开发：JS中常用事件汇总

System

2024-08-15

所有,javascript

在JavaScript中，常见的事件类型包括：

鼠标事件：
- click：用户点击元素
- dblclick：用户双击元素
- mousedown：用户按下鼠标按钮
- mouseup：用户释放鼠标按钮
- mousemove：用户移动鼠标
- mouseenter：鼠标进入元素
- mouseleave：鼠标离开元素
- mouseover：鼠标经过元素
- mouseout：鼠标离开元素
- contextmenu：用户打开上下文菜单（例如点击鼠标右键）
键盘事件：
- keydown：用户按下键
- keyup：用户释放键
- keypress：用户按下并释放键（仅在按键产生字符时触发）
表单事件：
- input：用户在<input>或<textarea>元素中输入文本
- change：表单元素的内容改变，通常用于<input>, <select>, 或 <textarea>
- submit：用户提交表单
- reset：用户重置表单
窗口事件：
- load：页面加载完毕
- unload：用户离开页面
- resize：窗口尺寸改变
- scroll：滚动窗口
- error：加载文档或图片时发生错误
其他事件：
- focus：元素获得焦点
- blur：元素失去焦点
- scrollstart：滚动开始（移动设备专用）
- scrollend：滚动结束（移动设备专用）

举例使用：




// 为按钮添加点击事件
document.getElementById('myButton').addEventListener('click', function() {
    alert('按钮被点击了！');
});
 
// 监听文本输入框的内容改变
document.getElementById('myInput').addEventListener('input', function() {
    console.log('输入内容：', this.value);
});
 
// 窗口大小改变时的处理
window.addEventListener('resize', function() {
    console.log('窗口宽度：', window.innerWidth);
    console.log('窗口高度：', window.innerHeight);
});

这些事件可以通过addEventListener方法添加到HTML元素上。

System

2024-08-15

所有,javascript




// 1. let 关键字：块级作用域，不可重复声明，不提升
{
  let a = 10;
  var b = 1;
 
  // let c = a; // 报错：Cannot access 'a' before initialization
  // let c = b; // 报错：Identifier 'b' has already been declared
}
 
// 2. 箭头函数：简洁语法，不绑定this，没有prototype属性，不能用作构造函数
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 输出：3
 
// 箭头函数中的this指向定义时所在作用域中的this
const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  },
  greetArrow: () => console.log(`Hello, ${this.name}!`)
};
 
obj.greet(); // 输出：Hello, John!
obj.greetArrow(); // 输出：Hello, [全局对象或者undefined]!，取决于上下文
 
// 3. 闭包：内部函数可以访问其外部函数的变量
function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}
 
const counter = createCounter();
counter(); // 输出：1
counter(); // 输出：2

在这个例子中，我们使用了let来声明变量，避免了使用var时可能出现的作用域提升和重复声明问题。同时，我们演示了箭头函数的简洁语法和它不同于普通函数的this绑定。最后，我们通过创建一个计数器函数来演示闭包的概念，内部函数可以访问外部函数的变量，并且这个变量在外部函数执行后并没有被销毁。

- 阅读更多 -

【JS】async/await异常捕获，这样做才完美

System

2024-08-15

所有,javascript

在JavaScript中，使用async/await时，为了确保异步操作中发生的异常能够被捕获，你应该使用try/catch语句块。以下是一个使用async/await并且正确捕获异常的例子：




async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error('Error fetching data:', error);
    // 这里可以处理错误，比如通知用户或者重试操作
    throw error; // 可选：如果你想继续向上抛出异常
  }
}
 
// 使用函数并捕获可能发生的异常
async function main() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error in main function:', error);
  }
}
 
main();

在这个例子中，fetchData函数是异步的，它使用try/catch来捕获可能发生的异常。main函数等待fetchData完成，并使用另一个try/catch来捕获任何可能在main函数内发生的异常。这样，你就能确保异常能够被妥善处理，而不会导致程序崩溃。

- 阅读更多 -

js常用正则验证数字正则，web前端开发基础

System

2024-08-15

所有,javascript

在JavaScript中，常用的正则表达式来验证数字的模式包括：

仅允许数字（整数和小数）：




/^\d+(\.\d+)?$/

仅允许整数：




/^\d+$/

正整数：




/^[1-9]\d*$/

负整数：




/^-[1-9]\d*$/

整数（包括正负）：




/^-?\d+$/

保留两位小数的数字：




/^\d+(\.\d{1,2})?$/

非零开头的数字：




/^[1-9]\d*$/

负数（可以有两位小数）：




/^-(?!0\d)\d+(\.\d{1,2})?$/

非负整数（正整数 + 0）：




/^\d+$/

非正整数（负整数 + 0）：




/^((-\d+)|(0+))$/

例子代码：




function isNumber(str) {
    return /^\d+(\.\d+)?$/.test(str);
}
 
console.log(isNumber("123")); // true
console.log(isNumber("123.45")); // true
console.log(isNumber("abc")); // false

以上代码定义了一个isNumber函数，它使用了上面的正则表达式来检查一个字符串是否是数字。如果是，则返回true，否则返回false。

- 阅读更多 -

Vue3使用fabric.js实现可以加载图片与绘制功能的画布

System

2024-08-15

所有,javascript




<template>
  <div>
    <canvas ref="canvasEl" style="border:1px solid #000000;"></canvas>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import { fabric } from 'fabric';
 
export default {
  setup() {
    const canvasEl = ref(null);
    let canvas = null;
 
    onMounted(() => {
      canvas = new fabric.Canvas(canvasEl.value);
 
      // 加载图片
      fabric.Image.fromURL('path/to/your/image.jpg', (img) => {
        img.scaleToWidth(200); // 设置图片宽度为200
        canvas.add(img);
      });
 
      // 绘制图形
      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'blue',
        width: 20,
        height: 20
      });
      canvas.add(rect);
    });
 
    return {
      canvasEl
    };
  }
};
</script>

这段代码使用Vue 3的Composition API和fabric.js创建了一个基本的画布。在组件被挂载后（onMounted 生命周期钩子），初始化了一个fabric.Canvas实例，并从指定的图片URL加载了一个图片对象，然后将其添加到画布上。同时，代码中还演示了如何添加一个简单的蓝色矩形（fabric.Rect）到画布上。这个例子提供了一个基本框架，可以根据具体需求进行扩展和定制。

- 阅读更多 -