Jack Huang's Blog

发表于 更新于

文档生成

请参考使用vue+docxtemplater导出word。

文档预览

请参考docx-preview实现移动端word文件预览。

PDF预览

使用docx-preview的文档预览方案不够完善，显示不够完美，因此采用后端使用docxtemplater文档生成，再使用libreoffice-convert转换成pdf，再下载到前端使用pdfjs预览pdf的方案。

开发环境

  • nodejs: v12.18.4
  • express: “^4.18.2”
  • docxtemplater: “^3.36.1”
  • libreoffice-convert: “^1.4.1”
  • spark-md5: “^3.0.2”
  • pdfjs: 2.16.105

注意：在使用libreoffice-convert将docx转换成pdf之前，需要安装libre office软件，使用默认配置安装。

参考链接

  1. 使用vue+docxtemplater导出word,by 实迷途其未远.
  2. 详细|vue中使用PDF.js预览文件实践,by 灵扁扁.
  3. docx-preview实现移动端word文件预览,by LXLong.
  4. vue项目，npm install方式使用pdfjs,by 下一秒.
  5. Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能,by 蒋川.
  6. PDF.js访问远程服务器报file origin does not match viewer’s,by 心灵的学霸.
  7. 深入理解xhr responseType blob arrayBuffer document text json使用,by 柚子=_=.
  8. 【实战分享】js生成word(docx)，以及将word转成pdf解决方案分享,by 前端开发小陈.
  9. libreoffice-convert not working in nodejs,by stackoverflow.

发表于 更新于

示例1

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div class="app-container">
    <div v-for="field in fields" :key="field.id" class="editable-field">
      <template v-if="editedFieldId === field.id">
        <input type="text" v-model="field.value" :ref="`field${field.id}`" />
        <button class="btn" @click.prevent="toggleEdit">
          <template>Save</template>
        </button>
      </template>
      <template v-else>
        <span class="editable-text">
          {{ field.value }}
        </span>
        <button class="btn" @click.prevent="toggleEdit(field.id)">Edit</button>
      </template>
    </div>
  </div>
</template>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
export default {
  name: "InlineEdit",
  props: {},
  data() {
    return {
      editedFieldId: null,
      fields: [
        {
          id: 1,
          value: "Editable field 1",
        },
        {
          id: 2,
          value: "Editable field 2",
        },
      ],
    };
  },
  created() { },
  mounted() { },
  methods: {
   toggleEdit(id) {
      if (id) {
        this.editedFieldId = id;
        this.$nextTick(() => {
          if (this.$refs["field" + id]) {
            this.$refs["field" + id][0].focus();
          }
        });
      } else {
        this.editedFieldId = null;
      }
    },
  },
};

示例2

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div class="container">
    <input
      type="text"
      v-if="edit"
      :value="valueLocal"
      @blur="onBlur($event)"
      @keyup.enter="onKeyEnter($event)"

      v-focus
    />
    <span v-else @click="edit = true">
      {{ valueLocal }}
    </span>
  </div>
</template>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>
export default {
  name: "ClickToEdit",
  props: ["value"],

  data() {
    return {
      edit: false,
      valueLocal: this.value,
    };
  },

  watch: {
    value: function () {
      this.valueLocal = this.value;
    },
  },

  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },

  methods:{
    onBlur(ev){
      this.valueLocal = ev.target.value;
      this.edit = false;
      this.$emit('input', this.valueLocal);
    },
    onKeyEnter(ev){
      this.valueLocal = ev.target.value;
      this.edit = false;
      this.$emit('input', this.valueLocal);
    }
  }
};
</script>

参考链接

  1. Vue Inline edit,by yobyzal.
  2. Building a form with inline editing,by stackoverflow.
  3. Simple inline editable fields with Vue.js,by devrecipes.

发表于

删掉“我认为”、“我觉得”、“我相信”等

先写标题

写出音乐感

“triad”（三合音）

CTA = call to action

一寸相框

简单和清晰

不说副词

填满画布

参考链接

  1. 10个实用写作技巧,by happy xiao.

发表于

如何计算用于图像采集的正确镜头焦距和相机传感器分辨率？

介绍

首先，定义这些基本术语：

  • 视野 (FOV)：相机需要获取的被检查区域
  • 最小特征：图像中要检测的最小特征的大小
  • 工作距离（WD）：镜头前端到被检物体的距离

请参考以下图片：

相机成像示意图1

图1 相机成像示意图1

相机成像示意图2

图2 相机成像示意图2

参考连接

  1. Calculating Camera Sensor Resolution and Lens Focal Length,by ni.com.

发表于

Visual Studio（中文版）默认保存的文本文件是GB2312编码（代码页 936）的，默认的行尾（End of line）是CRLF的。在编译C/C++项目时会出现如下警告：

1
warning C4819: The file contains a character that cannot be represented in the current code page (936). Save the file in Unicode format to prevent data loss。

解决方法请参考Visual Studio 默认保存为 UTF8 编码。

参考链接

  1. Visual Studio 默认保存为 UTF8 编码,by 123si.

发表于 更新于

国际标准大气( ISA ) 是一个静态大气模型，用于描述地球大气的压力、温度、密度和粘度如何在广泛的高度或海拔范围内变化。它的建立是为了提供温度和压力的通用参考，并由不同高度的值表以及推导出这​​些值的一些公式组成。

在标准日条件下使用

ISA数学模型将大气分成几层，假设绝对温度 T与位势高度 h呈线性分布。其他两个值（压力P和密度ρ）通过同时求解以下方程得到：

  • 由流体静力平衡产生的垂直压力梯度，它与压力变化率与位势高度相关：

$${\displaystyle {\frac {dP}{dh}}=-\rho g}$$

  • 摩尔形式的理想气体定律，它与压力、密度和温度有关：

$$\ P=\rho R_{\rm {具体}}T$$

在非标准日条件下使用

ISA 模拟了一个假设的标准日，以便为计算和测试不同海拔高度的发动机和车辆性能提供可重复的工程参考。它不提供实际大气条件的严格气象模型（例如，由于风条件引起的气压变化）。它也没有考虑湿度影响。空气被假定为干燥、清洁且成分恒定。在从标准大气模型获得压力和密度后，通过在空气 的热力学状态中添加水蒸气，在车辆或发动机分析中考虑了湿度效应。

非标准（热或冷）日是通过将指定的温度增量添加到海拔高度的标准温度来模拟的，但将压力作为标准日值。使用理想气体状态方程在合成温度和压力下重新计算密度和粘度。

参考链接

  1. 空气动力学从入门到弃坑：概述和标准大气,by Mr.Zhang.
  2. International Standard Atmosphere,by wikipedia.
  3. Mach_number,by wikipedia.
0%