标签 Javascript 下的文章

Electron项目中将CommonJS改成使用ES 模块（ESM）语法preload.js加载报错

2024-08-14

报错原因可能是因为在预加载脚本（preload.js）中使用了ES模块的导入导出语法，但Electron的预加载脚本默认使用CommonJS模块系统。

解决方法：

如果你的Electron版本支持在预加载脚本中使用ES模块，你可以通过在package.json中配置Electron来启用对ES模块的支持。例如：




{
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^x.y.z"
  },
  "electron": {
    "renderer": {
      "preload": {
        "js": true
      }
    }
  }
}

将你的预加载脚本（preload.js）改为使用CommonJS的module.exports或exports来导出功能。例如：




// 使用CommonJS导出
module.exports = {
  someFunction: () => {
    // 你的预加载逻辑
  }
};

或者如果你想要继续使用ES模块语法，可以将预加载脚本放在一个单独的文件中，并通过require来导入所需的模块。例如：




// preload.js
const someModule = require('./some-module.js');
 
someModule.someFunction();

确保你的预加载脚本文件（如preload.js）与webPreferences中的preload选项相匹配，并且确保它们在同一目录下或者preload选项指向正确的路径。

- 阅读更多 -

html-docx-js-typescript——将html生成docx文档

System

2024-08-14

所有,javascript

html-docx-js 是一个库，可以将HTML内容转换为.docx文件格式。在TypeScript中使用时，你需要安装相关的包，并且调用它提供的函数来进行转换。

首先，安装html-docx-js包：




npm install html-docx-js

然后，你可以使用以下TypeScript代码来将HTML转换为.docx文件：




import { convertHtmlToDocx } from 'html-docx-js/dist';
 
// 示例HTML内容
const htmlContent = `
  <h1>Hello World</h1>
  <p>This is a test paragraph.</p>
`;
 
// 将HTML转换为docx文件的字节流
const docx = convertHtmlToDocx(htmlContent);
 
// 创建一个Blob对象，用于创建可下载的文件
const blob = new Blob([docx], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
 
// 创建一个链接元素
const link = document.createElement('a');
 
// 使用URL.createObjectURL创建一个Blob的URL
link.href = URL.createObjectURL(blob);
 
// 设置下载文件名
link.download = 'document.docx';
 
// 触发下载
link.click();

这段代码首先定义了一个简单的HTML字符串，然后使用convertHtmlToDocx函数将其转换为.docx格式的字节流。接着，它创建了一个Blob对象，并通过创建一个临时的URL，使得用户可以下载这个Blob对象作为文件。最后，它创建了一个<a>元素并模拟了一个点击事件来触发下载。

System

2024-08-14

所有,javascript

以下是搭建Vue CLI 3项目的基本步骤：

安装Node.js

首先，你需要在你的计算机上安装Node.js。你可以从Node.js官方网站下载安装包：https://nodejs.org/。

安装Vue CLI

Node.js安装完成后，你可以通过npm（Node.js的包管理器）来安装Vue CLI。在命令行中运行以下命令：




npm install -g @vue/cli

创建一个新的Vue项目

Vue CLI安装完成后，你可以通过运行以下命令来创建一个新的Vue项目：




vue create my-project

这里my-project是你的项目名称。你可以按照提示选择一个预设的配置或者手动选择特性。




cd my-project
npm run serve

浏览器访问

服务启动后，你可以在浏览器中访问 http://localhost:8080 来查看你的Vue应用。

以上步骤涵盖了使用Vue CLI 3从零开始搭建一个项目的基本流程。

- 阅读更多 -

【JS】img标签使用base64图片以及如何将图片转为base64格式

System

2024-08-14

所有,javascript

在HTML中使用<img>标签加载base64图片非常简单，只需要将图片的base64编码作为src属性的值即可。

例如：




<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...">

要将图片转换为base64格式，可以使用JavaScript中的FileReader API。以下是一个简单的示例函数，它接受一个文件对象，并返回一个base64编码的图片字符串。




function convertToBase64(file, callback) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (event) {
    callback(event.target.result);
  };
  reader.onerror = function (error) {
    console.log('Error: ', error);
  };
}
 
// 使用方法：
// 假设你有一个<input type="file">元素和一个id为'output'的<img>元素
document.querySelector('input[type=file]').addEventListener('change', function (e) {
  convertToBase64(e.target.files[0], function (base64) {
    document.getElementById('output').src = base64;
  });
});

在这个示例中，当用户选择一个文件后，convertToBase64函数将文件转换为base64格式，然后将转换后的base64字符串赋值给<img>标签的src属性。

- 阅读更多 -

使用html-docx-js轻松将HTML转换为DOCX文档

System

2024-08-14

所有,javascript

html-docx-js 是一个库，可以将HTML内容转换为Word文档（.docx 格式）。以下是使用 html-docx-js 的基本步骤：

引入 html-docx-js 库。
准备要转换的HTML内容。
使用 html-docx-js 将HTML转换为DOCX。
使用 file-saver 保存生成的DOCX文件。

以下是一个简单的示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>HTML to DOCX</title>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html-docx-js@0.3.1/dist/html-docx.js"></script>
</head>
<body>
 
<div id="content">
    <h1>Hello World</h1>
    <p>This is an example paragraph.</p>
</div>
 
<button onclick="convertToDocx()">Convert to DOCX</button>
 
<script>
function convertToDocx() {
    var content = document.getElementById('content').innerHTML;
    var converted = htmlDocx.asBlob(content);
 
    saveAs(converted, 'document.docx');
}
</script>
 
</body>
</html>

在这个示例中，我们定义了一个带有标题和段落的HTML内容。当用户点击按钮时，convertToDocx 函数会被触发，它会使用 html-docx-js 将HTML内容转换为DOCX格式的文件，并使用 file-saver 保存这个文件。

- 阅读更多 -

用js做一个倒计时(时分秒),js中倒计时器怎么实现

System

2024-08-14

所有,javascript

在JavaScript中，可以使用setInterval函数来创建一个倒计时器。以下是一个简单的倒计时示例：




// 设定倒计时时间（单位：毫秒）
const countdownTime = 1000 * 60 * 60; // 例如，1小时
 
// 更新倒计时函数
function updateCountdown(duration) {
  const now = Date.now();
  const distance = duration - now;
 
  // 如果倒计时未结束，计算剩余时间
  if (distance >= 0) {
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
    // 输出或显示剩余时间
    console.log(`${hours}小时 ${minutes}分 ${seconds}秒`);
  } else {
    console.log("倒计时结束！");
    clearInterval(intervalId); // 清除倒计时
  }
}
 
// 创建倒计时定时器，并且每秒更新一次
const intervalId = setInterval(updateCountdown, 1000, countdownTime);

这段代码会创建一个60分钟（3600秒）的倒计时，并且每秒钟输出一次剩余时间。倒计时结束时，定时器会自动清除停止。你可以根据需要调整countdownTime的值来设置不同的倒计时时间。

- 阅读更多 -

js将对象数组中的某个属性值，批量替换成另一个数值

System

2024-08-14

所有,javascript

要将JavaScript对象数组中的某个属性值批量替换为另一个数值，可以使用数组的map方法。以下是一个示例代码：




// 假设有以下对象数组
let objectsArray = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 28 }
];
 
// 将所有对象的 'age' 属性值替换为 35
let updatedArray = objectsArray.map(obj => {
  return { ...obj, age: 35 };
});
 
console.log(updatedArray);

执行上述代码后，updatedArray将包含每个对象的age属性被替换为35后的新数组。

- 阅读更多 -

JS中的Math对象（秒懂如何使用Math对象）

System

2024-08-14

所有,javascript

JavaScript 的 Math 对象提供了一些用于数学运算的方法和常量。以下是一些常用的 Math 对象的属性和方法：

属性：

Math.E：自然对数的底数，约等于 2.718281828459045。
Math.LN2：2 的自然对数的近似值，约等于 0.6931471805599453。
Math.LN10：10 的自然对数的近似值，约等于 2.302585092994046。
Math.LOG2E：以 2 为底的 E 的对数的近似值，约等于 1.4426950408889634。
Math.LOG10E：以 10 为底的 E 的对数的近似值，约等于 0.4342944819032518。
Math.PI：圆周率 π 的近似值，约等于 3.141592653589793。
Math.SQRT1_2：1/2 的平方根的近似值，约等于 0.7071067811865476。
Math.SQRT2：2 的平方根的近似值，约等于 1.4142135623730951。

方法：

Math.abs(x)：返回 x 的绝对值。
Math.acos(x)：返回 x 的反余弦值。
Math.asin(x)：返回 x 的反正弦值。
Math.atan(x)：返回 x 的反正切值。
Math.atan2(y, x)：返回从 x 轴到点 (x,y) 的角度。
Math.ceil(x)：返回大于等于 x 的最小整数。
Math.cos(x)：返回 x 的余弦值。
Math.exp(x)：返回 E 的 x 次幂。
Math.floor(x)：返回小于等于 x 的最大整数。
Math.log(x)：返回 x 的自然对数（以 E 为底）。
Math.max(x, y)：返回 x 和 y 中的最大值。
Math.min(x, y)：返回 x 和 y 中的最小值。
Math.pow(x, y)：返回 x 的 y 次幂。
Math.random()：返回一个介于 0（包括）和 1（不包括）之间的随机数。
Math.round(x)：返回最接近 x 的整数。
Math.sin(x)：返回 x 的正弦值。
Math.sqrt(x)：返回 x 的平方根。
Math.tan(x)：返回 x 的正切值。
Math.toSource()：返回对象的源代码。
Math.toString()：返回 Math 对象的字符串表示。
Math.value(x)：返回 x 的正值。
Math.trunc(x)：返回 x 的整数部分。

示例代码：




// 使用 Math.PI 计算圆的面积
const areaOfCircle = radius => Math.PI * Math.pow(radius, 2);
 
// 生成一个随机整数
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 
console.log(areaOfCircle(5)); // 计算半径为

- 阅读更多 -

FastAPI访问/docs接口文档显示空白、js/css无法加载

System

2024-08-14

所有,javascript

解释：

FastAPI生成的交互式API文档是通过Swagger UI提供的，该文档需要JavaScript和CSS文件来正确渲染。如果你访问/docs接口文档时页面显示空白，通常是因为JavaScript和CSS文件没有被正确加载。

可能的原因及解决方法：

静态文件路径问题：确保FastAPI的静态文件路径配置正确。如果你自定义了静态文件路径，请确保Swagger UI的静态文件被放置在正确的位置。
网络问题：检查是否存在网络阻断，如防火墙、代理服务器等，这可能导致资源无法加载。
服务器配置问题：确保你的Web服务器（如Uvicorn）配置正确，能够正确地提供静态文件。
版本不兼容：如果你最近升级了FastAPI或其依赖库，可能存在版本不兼容的问题。检查你的FastAPI、Uvicorn、Starlette等库的版本，确保它们之间相互兼容。
浏览器缓存问题：尝试清除浏览器缓存或使用无痕模式查看是否能够加载资源。
路由问题：确保FastAPI的路由配置没有问题，/docs路由应当正确指向Swagger UI。
安全设置问题：如果你的应用启用了HTTPS，确保Swagger UI的资源也是通过HTTPS加载的。

简单的检查步骤：

检查浏览器控制台是否有错误信息。
确认是否有相关的网络请求被阻止或失败。
通过其他方式（如Postman）检查API端点是否响应正常。
如果你使用的是反向代理，请检查反向代理配置是否正确转发了静态文件请求。

如果以上步骤无法解决问题，可以查看FastAPI的日志文件，或者在FastAPI的社区、GitHub仓库中搜索类似问题，以获取更多帮助。

- 阅读更多 -

JS中的性能优化——防抖、节流简解

System

2024-08-14

所有,javascript

防抖（debounce）和节流（throttle）是性能优化的常用手段，用以控制函数执行的频率，以减少计算资源的使用。

防抖：指的是当持续触发事件时，只在停止触发一段时间后，才执行函数。

节流：指的是在一定时间内只执行一次函数。

以下是防抖和节流的简单实现：

防抖：




function debounce(fn, wait) {
  let timeout = null;
  return function() {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait);
    if (callNow) fn.apply(context, args);
  };
}
 
// 使用
let myFunc = debounce(function() {
  console.log('防抖函数执行');
}, 200);
window.addEventListener('resize', myFunc);

节流：




function throttle(fn, wait) {
  let previous = 0;
  return function() {
    let context = this;
    let args = arguments;
    let now = new Date();
    if (now - previous > wait) {
      fn.apply(context, args);
      previous = now;
    }
  };
}
 
// 使用
let myFunc = throttle(function() {
  console.log('节流函数执行');
}, 200);
window.addEventListener('resize', myFunc);

防抖和节流可以帮助我们管理事件触发的频率，从而减少不必要的计算或者资源消耗。在实际开发中，根据需要选择适合的方案。

- 阅读更多 -