IMyself https://blog.lmyself.top/ 前端技术分享记录~ Wed, 05 Aug 2026 02:42:44 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2026, IMyself <![CDATA[前端调用浏览器打印]]> https://blog.lmyself.top/article/3b2ee568-45a2-8082-bd59-e83b91903f0f https://blog.lmyself.top/article/3b2ee568-45a2-8082-bd59-e83b91903f0f Tue, 04 Aug 2026 00:00:00 GMT

前端文件打印方案

概述

本方案实现了纯前端打印远程文件的能力，支持 PDF、图片、Word（docx）、Excel（xlsx/xls）、文本等常见格式。用户点击"打印"按钮后，直接唤起浏览器打印对话框，无需下载文件到本地。

核心问题与解决方案

问题背景

传统的文件打印方案面临两个核心障碍：
  1. OSS 响应头限制
      2. 阿里云 OSS 返回的文件 URL 携带 Content-Disposition: attachment，导致浏览器直接下载而非预览。无论使用 window.open、<iframe>、还是 printJS 直接传 URL，都会触发下载行为。
  1. Office 格式不可直接渲染
      2. 浏览器原生只能渲染 PDF、图片、文本、HTML，无法直接显示 .docx / .xlsx 文件。

解决思路

绕过 attachment 响应头
使用 fetch() API 将文件以 ArrayBuffer 形式拉取到浏览器内存中。这样文件内容由 JavaScript 控制，不受服务端响应头影响。
格式转换 + 同源 iframe 打印
  • 将 Office 文档转换为 HTML
  • 将 PDF / 图片转换为 Blob URL
  • 把转换后的内容注入同源的隐藏 <iframe> 中
  • 调用 iframe.contentWindow.print() 唤起打印对话框
由于 iframe 是同源的（通过 document.write 创建），不受跨域限制，print() 可以正常调用。

技术实现

核心依赖

这三个库都采用动态 import，按需加载，不会增加主包体积。

文件处理流程

支持格式列表

格式分类
支持的后缀
处理方式
备注
PDF
pdf
print-js
调用浏览器内置 PDF 阅读器
图片
jpg, jpeg, png, gif, bmp, webp, svg
Blob URL → <img>
自动居中，响应式缩放
Word
docx
mammoth.js 转 HTML
⚠️ 丢失分页、页眉页脚、文本框
Excel
xlsx, xls, xlsm
SheetJS 转 HTML 表格
⚠️ 仅保留计算结果，丢失公式、图表
文本
txt, json, xml, csv, properties, log, md
文本解码 + <pre>
UTF-8 失败自动尝试 GBK
不支持
doc, ppt, pptx
-
提示并自动下载
⚠️ 重要提示：Word / Excel 转换会丢失部分格式和功能。如果需要打印带签章的正式文档或复杂排版，建议后端使用 LibreOffice / OnlyOffice / Aspose 转换为 PDF 后再打印。

使用方法

1. 安装依赖

2. 导入工具函数

3. 调用打印函数

API 说明

printRemoteFile(url, options)
参数
参数
类型
必填
说明
url
string
✅
文件地址（需允许跨域读取）
options.suffix
string
❌
文件后缀（如 'pdf' / 'docx'）<br>不传时会从 url 或 fileName 自动推断
options.fileName
string
❌
文件名，用于打印标题
返回值
Promise<void> - 打印对话框唤起后 resolve；失败时 reject
错误类型

前提条件

CORS 跨域配置

前端需要通过 fetch() 读取文件内容，OSS Bucket 必须配置允许跨域访问。
验证方法（在浏览器控制台执行）：
如果看到 CORS policy 相关错误，需要在 OSS 控制台设置跨域规则：

已知限制

1. Word 文档转换限制

✅ 能保留的
  • 段落、标题、列表
  • 加粗、斜体、下划线
  • 表格结构
  • 内嵌图片
❌ 会丢失的
  • 分页符、页眉页脚
  • 文本框、浮动图片定位
  • 批注、修订
  • 艺术字、形状

2. Excel 文档转换限制

✅ 能保留的
  • 单元格值（公式的计算结果）
  • 合并单元格
  • 基本表格结构
❌ 会丢失的
  • 公式本身（只保留计算结果）
  • 条件格式、数据透视表
  • 图表、迷你图
  • 精确的列宽 / 行高

3. 不支持的格式

格式
原因
处理方式
.doc
二进制 BIFF 格式，mammoth 不支持
自动下载
.ppt / .pptx
无成熟的纯前端解析方案
自动下载

适用场景

✅ 适合使用本方案的场景

  • 打印内容为主的文档（如知识库文章、技术文档）
  • 打印图片、PDF
  • 快速预览并打印 Excel 数据表
  • 不需要完全还原原始排版

⚠️ 不适合使用本方案的场景

  • 打印带签章的正式文档（如合同、证明）
  • 打印需要精确排版的 Word 报告
  • 打印包含复杂公式的 Excel 财务表
  • 打印 PPT 演示文稿
对于以上场景，建议后端使用 LibreOffice / OnlyOffice / Aspose 转换为 PDF 后再打印，确保内容与原件一致。

性能优化

1. 动态加载

mammoth 和 xlsx 使用动态 import()，只在需要时加载：

2. Blob URL 自动回收

创建的 Blob URL 会在打印完成后自动释放：

3. 图片预加载

HTML 注入 iframe 后，会等待所有图片加载完成再打印，避免打印空白图片：

故障排查

问题：点击打印后直接下载文件

原因：CORS 配置缺失，fetch() 被浏览器拦截。
解决：检查 OSS Bucket 跨域规则，或改用后端代理接口（同源请求不受 CORS 限制）。

问题：Word / Excel 打印内容不完整

原因：前端转换库功能有限，复杂格式会丢失。
解决：后端接入 LibreOffice / Aspose，上传时或打印时转换为 PDF。

问题：PDF 打印对话框一直不关闭 loading

原因：print-js 的 onPrintDialogClose 回调在部分浏览器不触发。
解决：代码中已加 8 秒超时兜底，自动关闭 loading。

问题：打印按钮没反应

  1. 打开浏览器控制台，查看是否有报错
  1. 检查文件地址是否有效（proxyUrl / filePath / foreverUrl）
  1. 验证 CORS 是否配置正确（见上方验证方法）

扩展阅读

总结

本方案通过 fetch 绕过 OSS 的 attachment 响应头，结合格式转换库将文件转为可渲染内容，最终通过同源 iframe 调用 print() 实现打印。
优点：无需后端改造，纯前端实现，用户体验流畅。
缺点：Office 格式转换有限制，不适合正式文档打印。
根据业务场景选择：内容型文档用前端方案，正式文档让后端转 PDF。
]]> <![CDATA[博客导流微信公众号]]> https://blog.lmyself.top/article/11cee568-45a2-803e-8e5b-e34f7c297dc1 https://blog.lmyself.top/article/11cee568-45a2-803e-8e5b-e34f7c297dc1 Fri, 11 Oct 2024 00:00:00 GMT

博客导流公众号

如何进入 工具 页面：

如何使用？

登录：「博客引流公众号」->「博客注册」
notion image
根据提示填写你的信息，之后就会生成整合方案
notion image

NotionNext配置说明

在您的Notion配置中心添加以下配置，即可在网页上激活文章验证码解锁功能
配置名
配置值（示例）
说明
TECH_GROW_BLOG_ID
3xxxx-1xxxxxxxxxx0-xx4
techgrow后台配置的博客ID[blogId]
TECH_GROW_QRCODE
https://open.weixin.qq.com/qr/code?username=gh_29d5e8d7d648
公众号二维码图片
TECH_GROW_NAME
IMyself
公众号名字，可用于搜索关注
TECH_GROW_KEYWORD
验证码
在公众号设置的自动关键词
TECH_GROW_BTN_TEXT
原创不易，完成人机检测，阅读全文
【非必填】按钮提示词
TECH_GROW_WHITE_LIST
about,example,test
【非必填】白名单，不需要加密的文章slug，英文逗号隔开。其余全站文章都需要验证码。
TECH_GROW_VALIDITY_DURATION
1
【非必填】验证一次后，阅读权限的持续时长，单位是“小时”，默认是1小时
TECH_GROW_YELLOW_LIST
ㅤ
仅这些路径启用拦截（优先级高于白名单）
要实现这个配置，你需要先注册techgrow平台，获取blogId，并且设置一个用于回复的关键词绑定。

关键步骤

  1. 我们需要记录这里的blogId这个参数，即上图中blogId后面打马赛克的部分。
  1. 按照提示需要在公众号后台设置关键词回复。

公众号二维码图片哪里来？

  1. 在公众号管理中心，找到并点击“设置”，找到“账号信息”
  1. 在账号信息页面，找到“二维码”，然后点击“更多尺寸”
  1. 进入更多尺寸的页面，会呈现出常用的二维码尺寸，和建议扫描的距离，根据需要，选择下载，即可获得相应的公众号二维码。

公众号关键词回复如何设置？

公众号后台找到 ： 自动回复→关键词回复→添加回复
]]> <![CDATA[关于CPA、CC-Switch]]> https://blog.lmyself.top/article/31bee568-45a2-8083-8f81-e4e17e6719bc https://blog.lmyself.top/article/31bee568-45a2-8083-8f81-e4e17e6719bc Fri, 06 Mar 2026 00:00:00 GMT

CPA（CLIProxyAPI）

项目地址

GitHub - router-for-me/CLIProxyAPI: Wrap Gemini CLI, Antigravity, ChatGPT Codex, Claude Code, Qwen Code, iFlow as an OpenAI/Gemini/Claude/Codex compatible API service, allowing you to enjoy the free Gemini 2.5 Pro, GPT 5, Claude, Qwen model through API
Wrap Gemini CLI, Antigravity, ChatGPT Codex, Claude Code, Qwen Code, iFlow as an OpenAI/Gemini/Claude/Codex compatible API service, allowing you to enjoy the free Gemini 2.5 Pro, GPT 5, Claude, Qwe...
GitHub - router-for-me/CLIProxyAPI: Wrap Gemini CLI, Antigravity, ChatGPT Codex, Claude Code, Qwen Code, iFlow as an OpenAI/Gemini/Claude/Codex compatible API service, allowing you to enjoy the free Gemini 2.5 Pro, GPT 5, Claude, Qwen model through API
https://github.com/router-for-me/CLIProxyAPI
GitHub - router-for-me/CLIProxyAPI: Wrap Gemini CLI, Antigravity, ChatGPT Codex, Claude Code, Qwen Code, iFlow as an OpenAI/Gemini/Claude/Codex compatible API service, allowing you to enjoy the free Gemini 2.5 Pro, GPT 5, Claude, Qwen model through API

只介绍windows下的使用（因为没有MAC）

  1. 点击releases前往下载
      2. notion image
  1. 下载后对文件进行解压，复制config.example.yaml 将新文件的文件名修改成config.yaml 编辑文件中的secret-key （后面登录会用到）
  1. 双击cli-proxy-api.exe 即可运行
  1. 运行成功后浏览器打开http://localhost:8317/management.html 输入当时设置的secret-key 就会进入到管理界面了。下面只介绍Codex的配置
  1. 如果你有Codex的认证文件 那你可以点击认证文件菜单然后点击上传文件把所有的文件进行上传后你会得到下图
      2. notion image
  1. 配置AI提供商（这里以中转站为例）添加Codex API配置 Base URL需要跟上/v1
  1. 然后点击配置面板菜单找到API 密钥列表点击添加API密钥，保留好密钥后面调用的时候会用到
  1. 如果你是本地启动的魔法不是全局也就是TUN模式的话需要对代理进行配置，使用Socket还是http模式都可以 具体自己尝试
官方参考文档

CC-Switch

项目地址

GitHub - farion1231/cc-switch: A cross-platform desktop All-in-One assistant tool for Claude Code, Codex, OpenCode, openclaw & Gemini CLI.
A cross-platform desktop All-in-One assistant tool for Claude Code, Codex, OpenCode, openclaw & Gemini CLI. - farion1231/cc-switch
GitHub - farion1231/cc-switch: A cross-platform desktop All-in-One assistant tool for Claude Code, Codex, OpenCode, openclaw & Gemini CLI.
https://github.com/farion1231/cc-switch
GitHub - farion1231/cc-switch: A cross-platform desktop All-in-One assistant tool for Claude Code, Codex, OpenCode, openclaw & Gemini CLI.

同样只介绍windows下的使用（因为没有MAC）

  1. 点击releases前往下载（两个都可以 Portable是便携版 无需安装）
      2. notion image
  1. 下载解压完以后直接双击运行.exe文件即可
  1. 下面介绍Codex的配置
      2. notion image
  1. 配置Claude的时候请求地址后面无需跟v1
  1. 配置完成后如果你的VsCode安装了Codex和Claude Code插件的话 重启编辑器就可以开始爽用了

CPA-clean

清理CPA中过期或者无法使用的账号 可以自行网上搜索
]]> <![CDATA[一些项目中用到的东西]]> https://blog.lmyself.top/article/js625 https://blog.lmyself.top/article/js625 Wed, 25 Jun 2025 00:00:00 GMT

Google自带分屏

如果没有开启的话在地址栏输入chrome://flags/ 搜索Split View 然后选择Enabled 开启即可
notion image

获取当年的周数以及当前周的日期区间

示例数据展示
方法调用
判断当前日期是第几周
Vue vant(v)选择周组件封装

js控制元素丝滑滚动

antd-vue 控制a-table默认滚动条滚动到最右边

antd-vue a-table合计功能

notion image

a-input(Ant Design of Vue1.7x)版本限制只能输入数字并且最多十位

如果碰到表单校验提示导致html错位

没用的话就改一下样式吧

对象数组补足长度

a-table序号列设置了fixed导致多出一列空白的问题

💯
或者将所有列的宽度加起来等于:scroll="{ x: m }"里m的值,然后其中一列不设置宽度

获取指定年份12个月份为数组并替换匹配数据的值

flex 布局导致子项高度相同，如何解决

直接在flex容器上，将align-items设为flex-start,或者align-items属性的其他值都可以,子项就会保持其自身的高度了

CSS :before、:after伪元素 content属性 中文乱码

将中文转为unicode编码 站长工具，例如：、—>\u3001

a-teble滚动加载

监听表格滚动条
监听父级容器

修改a-rate 评分颜色

vue中$router.push打开新窗口

最快速删除node_modules的几种方式

Ant Design of Vue 表单校验问题

有时候明明已经赋值了但是校验还是提示需要输入值

1. 数据绑定问题

确保 form.reckonDate的值格式正确：

2. 使用 v-model 替代 :value

将 :value 改为 v-model：

Vue组件互相引用问题

即 A 引用 B，B 又引用 A，并且这两个引用都是第一次导入会形成循环依赖，在大多数情况下会导致报错或未定义行为
让我们来详细解释一下：

什么是循环依赖？

当模块 A 尝试导入模块 B，而模块 B 又尝试导入模块 A 时，就形成了循环依赖。在 JavaScript（包括 Vue 组件）中，当一个模块被导入时，它的代码会立即执行。
  • 场景 1: A 导入 B
    • JS 引擎开始执行 A。
    • A 遇到 import B from './B.vue'。
    • JS 引擎暂停执行 A，去执行 B。
  • 场景 2: B 导入 A (在执行 B 的过程中)
    • JS 引擎开始执行 B。
    • B 遇到 import A from './A.vue'。
    • JS 引擎暂停执行 B，去执行 A。
    • 问题来了： A 已经被暂停了，现在又被要求执行。这就会导致一个死循环，或者其中一个模块在导入时会得到 undefined（因为它还没有完全导出）。

为什么 Vue 组件会报错？

在 Vue 中，当你局部注册一个组件时，你需要提供一个已经完全定义的组件选项对象。
  • A.vue:codeJavaScript
    • B.vue:codeJavaScript
      当你尝试编译 A.vue 时：
      1. 它需要 B.vue。
      1. 编译 B.vue 时，它又需要 A.vue。
      1. 因为 A.vue 还在等待 B.vue，所以它并没有完全导出。当 B.vue 尝试导入 A.vue 时，它可能得到一个 undefined 或者一个不完整的模块对象。
      1. 结果就是，当你尝试在 components 选项中注册这个 undefined 或不完整的对象时，Vue 就会报错，通常是 Unknown custom element 或 Failed to resolve component。

      解决方案

      解决循环依赖通常有以下几种方法：
      1. 异步组件/懒加载 (Lazy Loading)codeJavaScriptcodeJavaScript
          2. 这可以打破导入时的即时执行，但需要组件在用到时才加载。
          这种方法在技术上可行，但仍然表明你的组件设计可能需要优化，因为它并没有真正解决组件之间紧密耦合的问题。
      1. 全局注册 (谨慎使用)codeJavaScript
          2. 如果你把其中一个或两个组件都全局注册了，那么在它们需要的时候它们就已经在 Vue 实例上可用了，而不需要在另一个组件中 import。
          这样，在 A.vue 和 B.vue 中就都不需要 import 对方了。
          缺点： 全局注册会导致所有组件都会被打包，即使有些组件可能只在少数地方使用，增加了首次加载的大小。并且，它同样没有从根本上解决组件耦合的问题，只是绕过了模块导入的限制。

      antd a-date-picker设置可选时间范围

      Vue无缝滚动插件

      官网
      注册组件
      使用组件

      js控制全局滚动或者元素内部滚动

      v-show在template标签不生效

      <template> 标签本身不会被渲染到 DOM 中,所以 v-show 指令在 <template> 上不会生效!

      a-form-model自定义校验

      vue-quill-editor自定义截图上传

      代码
      使用

      表单校验不通过时定位到未通过校验的位置

      通用脱敏方法

      在数组中找到对应的对象并将该对象中同名的属性置空

      合并对象数组保留指定属性值

      ]]>             <![CDATA[Git操作汇总]]> https://blog.lmyself.top/article/gitbash https://blog.lmyself.top/article/gitbash Wed, 11 Sep 2024 00:00:00 GMT
      默认情况下，Git 会尝试缓存你的凭据（用户名和密码），但你可以通过以下方式禁用这个功能

      全局禁用

      公开仓库有时候可能push了隐私内容 删除之前的commit记录

      删除前一条或者指定的提交记录

      删除所有提交记录

      强制覆盖本地代码（与Git远程仓库保持一致）

      github只fork了master分支 想同步仓库源的所有分支

      1. 从 upstream 拉取所有分支：
        1. 查看所有分支：
            2. 你会看到类似：
        1. 创建并切换到某个分支（例如 branch1）： 如果你想同步 branch1：
          1. 将新分支推送到你的 Fork 仓库：

            git同步上游分支

            git推送当前代码到新分支

            ]]>                         <![CDATA[Css效果demo]]> https://blog.lmyself.top/article/28dee568-45a2-8051-a13f-d3adb9f03544 https://blog.lmyself.top/article/28dee568-45a2-8051-a13f-d3adb9f03544 Wed, 15 Oct 2025 00:00:00 GMT

            动态彩虹渐变字效

            代码
            ]]>