Vue | React 导出world

最新推荐文章于 2024-08-04 14:35:12 发布

qq_45104888

最新推荐文章于 2024-08-04 14:35:12 发布

阅读量854

点赞数 1

分类专栏： Vue React 文章标签： javascript vue.js reactjs

本文链接：https://blog.csdn.net/qq_45104888/article/details/113261988

版权

这篇博客介绍了如何在Vue和React应用中导出'world'，涉及docxtemplater、FileSaver、jszip和pizzip库的使用。在Vue中，通过设置模板字符串并使用这些库实现导出；而在React中，由于遇到问题，作者选择了pizzip作为替代方案。

摘要由CSDN通过智能技术生成

导出world

安装依赖

docxtemplater
是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。
安装： cnpm i docxtemplater -S
FileSaver
在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。
安装：cnpm i file-saver -S | cnpm i @types/file-saver -S
jszip
是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。
安装：cnpm i jszip -S
jszip-utils
是与jszip一起使用的跨浏览器的工具库。
安装：cnpm i jszip-utils -S

ts版在使用的时候会有小意外
在ts项目中引用第三方类型库，要注意第三方类库是否含有这个库的类型声明文件，如果没有这个库的声明文件的话，我们需要手动声明这个库
‘jszip’ 和 ‘jszip-utils’ 就需要手动操作
在这里插入图片描述

目标模板定好待替换模板字符串{ name }
在这里插入图片描述

vue中使用

	import {
    defineComponent } from 'vue';
	import Docxtemplater from 'docxtemplater';
	import {
    saveAs } from 'file-saver';
	import JSZip from 'jszip';
	import JSZipUtils from 'jszip-utils';
	
	const Test = defineComponent({
   
 	 props: {
   },
  	setup(props, context) {
   

    function changeName<T>(): void {
   
      JSZipUtils.getBinaryContent('a.docx', function(error: T, content: number[]) {
   

        if (error)