System 发布的文章

2024-08-22

vue-docx-preview 是一个用于在Vue应用中预览.docx文件的组件。要在新窗口中打开并预览.docx文件，你可以使用标准的HTML方法，如window.open()。

以下是一个简单的例子，展示如何在新窗口中使用vue-docx-preview组件打开并预览.docx文件：

首先，确保你已经安装了vue-docx-preview：




npm install vue-docx-preview

然后，在你的Vue组件中使用它：




<template>
  <div>
    <button @click="previewDocx">预览DOCX文件</button>
  </div>
</template>
 
<script>
import DocxPreview from 'vue-docx-preview';
 
export default {
  methods: {
    previewDocx() {
      // 假设你有一个docx文件的URL
      const docxUrl = 'https://example.com/document.docx';
 
      // 打开一个新的窗口并使用vue-docx-preview组件进行预览
      window.open(`/new-window.html#${docxUrl}`, '_blank');
    }
  }
};
</script>

在服务器上的new-window.html文件中，你需要引入Vue和vue-docx-preview，并使用它来显示DOCX文件：




<!DOCTYPE html>
<html>
<head>
  <title>DOCX预览</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="path/to/vue-docx-preview.umd.min.js"></script>
</head>
<body>
  <div id="app">
    <docx-preview :file="docxUrl"></docx-preview>
  </div>
 
  <script>
    const { DocxPreview } = VueDocxPreview;
    const app = Vue.createApp({
      data() {
        return {
          docxUrl: window.location.hash.substr(1)
        };
      },
      components: {
        DocxPreview
      }
    });
 
    app.mount('#app');
  </script>
</body>
</html>

请注意，你需要将path/to/vue-docx-preview.umd.min.js替换为实际的路径，并确保服务器正确地服务new-window.html文件。

这个例子中，点击按钮会触发previewDocx方法，该方法会打开一个新窗口，并在新窗口的HTML文件中使用vue-docx-preview组件来预览通过URL传递给它的DOCX文件。

- 阅读更多 -

从0搭建一个vue项目，不使用脚手架从html到vue

System

2024-08-22

所有,vue.js

要从零开始搭建一个Vue项目，不使用脚手架，你需要手动引入Vue的CDN链接，并创建一个简单的Vue实例。以下是步骤和示例代码：

创建一个HTML文件。
通过CDN引入Vue.js。
创建一个Vue实例并挂载到DOM元素上。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Project</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
 
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

在这个例子中，我们通过script标签引入了Vue.js，并创建了一个Vue实例，该实例绑定到了id为app的DOM元素上。在这个元素内部，我们使用双花括号{{ message }}来显示数据属性message的值。当网页加载时，文本"Hello Vue!"将显示在页面上。

System

2024-08-22

所有,vue.js

报错ERR_OSSL_EVP_UNSUPPORTED通常是因为Node.js在使用加密功能时，遇到了不支持的算法或者密钥长度不符合要求。

解决方法：

确认Node.js版本：确保你的Node.js版本是最新的，因为旧版本可能包含已知的加密算法问题。可以使用node -v命令查看当前版本，并通过nvm（Node Version Manager）安装最新版本。
更新OpenSSL：如果Node.js使用的是系统自带的OpenSSL库，尝试更新系统的OpenSSL库。
安装最新的Node.js版本：如果更新系统的OpenSSL库不起作用，可以尝试安装一个使用了更新版本OpenSSL的Node.js版本。
使用环境变量：在Node.js运行时，可以通过设置环境变量NODE_OPTIONS来强制Node.js使用特定版本的OpenSSL，例如：
```
NODE_OPTIONS=--openssl-config=./config/openssl.cnf node your-script.js
```
其中./config/openssl.cnf是你配置文件的路径。
检查代码：如果你在Vue或Node.js项目中使用了加密库（如crypto或者其他），确保你使用的加密算法是当前系统支持的。
联系库作者：如果以上方法都不能解决问题，可能是使用的库存在问题。可以尝试联系库的作者或者查看是否有更新的版本解决了这个问题。

在进行任何操作前，请确保备份好重要数据，以防数据丢失或损坏。

- 阅读更多 -

外卖推荐|基于SSM＋vue的外卖推荐系统的设计与实现(源码+数据库+文档)

System

2024-08-22

所有,vue.js

该项目是一个基于SSM（Spring MVC, Spring, MyBatis）框架和Vue.js技术栈的外卖推荐系统。由于涉及的内容较多，以下仅提供部分核心代码和数据库设计说明。

数据库设计（部分）：




CREATE TABLE `food` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `description` text NOT NULL,
  `image` varchar(255) NOT NULL,
  `category_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
);
 
CREATE TABLE `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `description` text NOT NULL,
  PRIMARY KEY (`id`)
);

SSM控制器代码（部分）：




@Controller
@RequestMapping("/food")
public class FoodController {
 
    @Autowired
    private FoodService foodService;
 
    @RequestMapping(value = "/list", method = RequestMethod.GET)
    public String list(Model model) {
        List<Food> foodList = foodService.findAll();
        model.addAttribute("foodList", foodList);
        return "food/list";
    }
 
    // 其他CRUD操作...
}

Vue组件代码（部分）：




<template>
  <div>
    <h1>外卖列表</h1>
    <ul>
      <li v-for="food in foods" :key="food.id">
        {{ food.name }} - 价格: {{ food.price }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      foods: []
    };
  },
  created() {
    this.fetchFoods();
  },
  methods: {
    fetchFoods() {
      // 假设已经有一个获取外卖列表的API接口 /api/food/list
      this.axios.get('/api/food/list').then(response => {
        this.foods = response.data;
      }).catch(error => {
        console.error('There was an error!', error);
      });
    }
  }
};
</script>

以上代码仅展示了数据库表的创建、SSM框架中控制器的简单用法和Vue组件的基本结构。要运行完整系统，需要配置Spring的数据源、MyBatis的SQL映射文件、Vue的路由和API接口调用。

源码和文档不适合在一个回答中完整展示，但上述提供了一个基本框架和思路。如果有兴趣获取完整的源码和文档，请联系项目作者或者通过适当的渠道进行获取。

- 阅读更多 -

若依vue添加访问白名单，免登录访问指定路由页面

System

2024-08-22

所有,vue.js

在Vue项目中，你可以使用路由守卫来实现访问白名单功能，即在用户访问某些指定路由页面时，如果用户未登录，则自动跳转到登录页面，或者直接允许访问。

以下是一个简单的例子，使用Vue Router实现访问白名单：




import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    // 其他路由...
  ]
})
 
// 白名单路由数组
const whiteList = ['/', '/login']
 
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录（这里假设有一个全局状态userInfo）
  const userInfo = Vue.prototype.$userInfo || {}
  if (!userInfo.isLogin && whiteList.indexOf(to.path) === -1) {
    // 如果用户未登录且当前路由不在白名单中，则重定向到登录页
    next('/login')
  } else {
    // 否则，直接进入该路由
    next()
  }
})
 
export default router

在这个例子中，我们定义了一个名为whiteList的数组，包含了允许免登录访问的路由路径。然后，我们使用了Vue Router的全局前置守卫beforeEach来判断用户是否需要登录。如果用户未登录且当前路由不在白名单中，则自动重定向到登录页面。如果用户已登录或者当前路由在白名单中，则正常进入该页面。

你需要根据自己的项目实际情况，将userInfo.isLogin替换为你的用户登录状态判断逻辑，并确保Vue.prototype.$userInfo是一个可访问的用户信息对象。

System

2024-08-22

所有,vue.js

在Vue中使用Element UI创建一个具有动态表头、表头合并、行合并以及列合并的表格，可以通过el-table组件的不同属性来实现。以下是一个简化的例子，展示了如何实现这些功能：




<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      v-for="header in dynamicHeaders"
      :key="header.prop"
      :prop="header.prop"
      :label="header.label"
      :span-method="header.spanMethod"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据项
      ],
      dynamicHeaders: [
        {
          label: '日期',
          prop: 'date',
          // 表头合并的方法
          colspanMethod: ({ row, column, rowIndex, columnIndex }) => {
            if (columnIndex === 0) {
              return [1, 2]; // 合并1行2列
            }
          }
        },
        {
          label: '姓名',
          prop: 'name',
        },
        // 其他动态表头
      ]
    };
  },
  methods: {
    // 行合并的方法
    rowSpanMethod({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return [1, 2]; // 合并1行2列
      }
    }
  },
  mounted() {
    // 假设你想根据某个字段内容一致来合并行
    this.tableData.forEach((row, index) => {
      if (index > 0 && row.someField === this.tableData[index - 1].someField) {
        row.someField = index; // 设置一个用于合并的字段
      }
    });
  }
};
</script>

在这个例子中，dynamicHeaders数组定义了表格的动态表头，每个表头对象可以包含label、prop和spanMethod属性。spanMethod是一个函数，用于表头合并。rowSpanMethod是一个方法，用于行合并，它可以根据你的逻辑返回一个数组，指定要合并的行数和列数。

列合并可以通过colspanMethod属性来指定，它也是一个函数，用于处理列的合并逻辑。

行的合并则是通过row-span-method属性来指定，它是一个函数，该函数接受一个参数，参数是一个包含row、rowIndex和column、columnIndex的对象，并根据这些值返回一个数组，指定要合并的行数和列数。

注意：实际使用时，需要根据实际数据和逻辑调整spanMethod、colspanMethod和rowSpanMethod的实现。

- 阅读更多 -

VUE识别图片文字OCR（tesseract.js）

System

2024-08-22

所有,vue.js




<template>
  <div>
    <input type="file" @change="readFile" />
    <div v-if="ocrText">
      <h2>识别结果:</h2>
      <p>{{ ocrText }}</p>
    </div>
  </div>
</template>
 
<script>
import Tesseract from 'tesseract.js';
 
export default {
  data() {
    return {
      ocrText: ''
    };
  },
  methods: {
    readFile(event) {
      const file = event.target.files[0];
      if (file) {
        this.recognizeText(file);
      }
    },
    recognizeText(image) {
      Tesseract.recognize(
        image,
        'eng', // 使用英文识别，你可以更换为其他语言代码
        {
          logger: m => this.ocrText = m.status
        }
      ).then(({ data: { text } }) => {
        this.ocrText = text;
      }).catch(error => {
        console.error(error);
        this.ocrText = 'OCR FAILED';
      });
    }
  }
};
</script>

这段代码使用了Vue.js和tesseract.js来实现图片中的文字识别功能。用户可以通过点击<input>元素选择一个图片文件，之后图片会被tesseract.js的Tesseract.recognize方法处理，并且识别结果会被展示在页面上。这个例子简单明了，并且注重于实现核心功能，而不是过多的UI细节。

- 阅读更多 -

vue预览pdf文件的几种方法

System

2024-08-22

所有,vue.js

在Vue中预览PDF文件，可以使用以下几种方法：

使用<iframe>标签直接嵌入PDF文件。
使用PDF.js库进行渲染。
使用Embedly服务自动生成PDF预览。

方法1：使用`<iframe>`标签




<template>
  <div>
    <iframe :src="pdfUrl" width="100%" height="600px"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
    };
  },
};
</script>

方法2：使用PDF.js

首先安装PDF.js：




npm install pdfjs-dist

然后在组件中使用：




<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import pdfjsLib from 'pdfjs-dist/build/pdf';
 
export default {
  props: ['pdfUrl'],
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      loadingTask.promise.then(pdf => {
        console.log('PDF loaded');
        // Fetch the first page of the PDF
        const pageNumber = 1;
        pdf.getPage(pageNumber).then(page => {
          console.log('Page loaded');
          const canvas = this.$refs.pdfCanvas;
          const ctx = canvas.getContext('2d');
          const viewport = page.getViewport({ scale: 1.5 });
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          // Render PDF page into canvas context
          const renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };
          const renderTask = page.render(renderContext);
          renderTask.promise.then(() => {
            console.log('Page rendered');
          });
        });
      }).catch(err => {
        // Handle errors here
        console.error('Error loading PDF: ', err);
      });
    }
  }
};
</script>

方法3：使用Embedly服务




<template>
  <div>
    <div v-html="pdfEmbed"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
      pdfEmbed: '',
    };
  },
  mounted() {
    this.fetchEmbed();
  },
  methods: {
    fetchEmbed() {
      // 使用Embedly服务生成PDF预览
      fetch(`https://embed.ly/api/oembed?url=${encodeURIComponent(this.pdfUrl)}`)
        .then(response => response.json())
        .then(data => {
          if (data.html) {
            this.pdfEmbed = data.html;
          }

System

2024-08-22

所有,vue.js




<template>
  <div>
    <button @click="generatePDF">生成PDF</button>
    <div id="content" style="padding: 10px;">
      <!-- 需要转换成PDF的内容 -->
    </div>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
export default {
  methods: {
    generatePDF() {
      const element = document.getElementById('content');
      html2canvas(element, { scale: 2 }).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF({
          orientation: 'portrait',
          unit: 'px',
          format: 'a4',
        });
        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.save('download.pdf');
      });
    }
  }
};
</script>

这段代码提供了一个简单的Vue方法，用于生成包含指定内容的PDF文件。它使用了html2canvas库将DOM元素转换为canvas，然后使用jspdf库将canvas保存为PDF。在这个例子中，我们假设需要转换的内容在id为content的DOM元素中。这段代码可以解决中文乱码和自动换行的问题，因为它正确处理了字符编码和文本换行。

- 阅读更多 -

vue+elementui地址选择器-三级联选择器+详细地址实现国内地址选择

System

2024-08-22

所有,vue.js

在Vue中使用Element UI的el-cascader组件可以实现三级联动的中国地址选择器。以下是一个简单的例子：

首先确保Element UI已经安装并在你的项目中正确引入。
在Vue组件中使用el-cascader组件，并且准备好三级地址数据。




<template>
  <div>
    <el-cascader
      v-model="selectedAddress"
      :options="addressOptions"
      @change="handleAddressChange"
      placeholder="请选择地址"
    ></el-cascader>
    <div v-if="selectedAddress.length">
      详细地址:
      <el-input v-model="detailAddress" placeholder="请输入详细地址"></el-input>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedAddress: [],
      detailAddress: '',
      addressOptions: [
        {
          value: '北京市',
          label: '北京市',
          children: [
            {
              value: '北京市',
              label: '北京市',
              children: [
                {
                  value: '东城区',
                  label: '东城区',
                },
                // ... 其他区县
              ],
            },
            // ... 其他市区
          ],
        },
        // ... 其他省份
      ],
    };
  },
  methods: {
    handleAddressChange(value) {
      // 当选择地址变化时，可以在这里处理其他逻辑
      console.log(value);
    },
  },
};
</script>

在这个例子中，el-cascader组件用于选择省市区，当选择完成后，可以通过v-model绑定的selectedAddress数组获取选中的地址值。根据需要，可以添加额外的输入框让用户填写详细地址。

- 阅读更多 -

方法1：使用<iframe>标签

方法2：使用PDF.js

方法3：使用Embedly服务

方法1：使用`<iframe>`标签