首页 > 其他分享 >js,以word模版生成word

js,以word模版生成word

时间:2022-09-26 17:24:04浏览次数:52  
标签:word 模版 js https error docxtemplater com properties

1. 以word模版生成word

模块:docxtemplater

官网:https://docxtemplater.com/docs/get-started-browser/

官网在线演示:https://docxtemplater.com/demo/#simple

1.1 浏览器版本写法:

(0) 定义模版 

(1) 安装模块 docxtemplate、file-save、pizzip (2) 编写

官方例子写法:https://stackblitz.com/edit/vuejs-docxtemplater-example?file=button.component.js

官方例子代码:

import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";

function loadFile(url, callback) {
  PizZipUtils.getBinaryContent(url, callback);
}

export default {
  methods: {
    renderDoc() {
      loadFile("https://docxtemplater.com/tag-example.docx", function(
        error,
        content
      ) {
        if (error) {
          throw error;
        }
        const zip = new PizZip(content);
        const doc = new Docxtemplater(zip, { paragraphLoop: true, linebreaks: true });
        doc.setData({
          first_name: "John",
          last_name: "Doe",
          phone: "0652455478",
          description: "New Website"
        });
        try {
          // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
          doc.render();
        } catch (error) {
          // The error thrown here contains additional information when logged with JSON.stringify (it contains a properties object containing all suberrors).
          function replaceErrors(key, value) {
            if (value instanceof Error) {
              return Object.getOwnPropertyNames(value).reduce(function(
                error,
                key
              ) {
                error[key] = value[key];
                return error;
              },
              {});
            }
            return value;
          }
          console.log(JSON.stringify({ error: error }, replaceErrors));

          if (error.properties && error.properties.errors instanceof Array) {
            const errorMessages = error.properties.errors
              .map(function(error) {
                return error.properties.explanation;
              })
              .join("\n");
            console.log("errorMessages", errorMessages);
            // errorMessages is a humanly readable message looking like this :
            // 'The tag beginning with "foobar" is unopened'
          }
          throw error;
        }
        const out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // Output the document using Data-URI
        saveAs(out, "output.docx");
      });
    }
  },

  template: `
    <button @click="renderDoc">
       Render docx template
    </button>
  `
};
View Code

 

1.2 nodejs写法:

看官方文档。

  2. word转pdf 模块:libreoffice-convert(仅nodejs可用) 介绍及写法:https://www.npmjs.com/package/libreoffice-convert  

 

标签:word,模版,js,https,error,docxtemplater,com,properties
From: https://www.cnblogs.com/zezhou/p/16731661.html

相关文章

  • 【前端】vue3 vue3-ace-editor json格式化显示 json编辑器
    一、效果二、代码<!----><template><divclass='content'><el-selectv-model="aceConfig.theme"class="m-2"placeholder="Select"size="large">......
  • Vue中使用introjs插件实现页面引导效果及设置Options(设置中文显示)示例
    场景若依前后端分离版手把手教你本地搭建环境并运行项目:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662在上面的基础上,实现页面引导/新手指引的......
  • threejs第一个案例
    1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>threejs初体验</title>6<scriptsrc="three.min.js"></......
  • JS Map Set
    Map是一组键值对的结构,具有极快的查找速度。 1.Map是键值对,Set是值得集合,当然键和值可以是任何的值;2.Map可以通过get⽅法获取值,⽽set不能因为它只有值;3.都能通过迭代器......
  • js闭包的理解。
    一、概念闭包函数:声明在一个函数中的函数叫做闭包。闭包:内部函数总是可以访问其在外部函数声明的参数和变量,使其它在外部函数被返回。二、特点1.让外部访问函数内部变......
  • 关于vue模版动态加载按照指定条件
    一、在data中定义要作为模版的变量,当前定义了两个menuNavigation和menuDetails   二、模版使用方式使用component中的用v-bind:is来使用其参数  ......
  • js红宝书学习笔记(一)引用类型
    一.引用类型  ECMAScript中,引用类型是一种数据结构称之为对象定义,,引用对象不同于传统面向对象语言所支持的类和接口等基本结构 创建Object实例的两种方式:new操......
  • [RxJS] ShareReplay vs share
    ShareReplayisusingReplaySubject.Itwillreplythemessagestolatersubscribers.Itturnsunicastobservabletomulticaseobservable.shareReplay(1,2000):......
  • [Rxjs] Build a basic application store with Subjects
    Store.jsimport{BehaviorSubject,Subject}from'rxjs';import{map,distinctUntilKeyChanged,scan}from'rxjs/operators';exportclassObservableStore{......
  • JS高级
    1.作用域1.1局部作用域局部作用域分为函数作用域和块作用域({})var是函数作用域const,let是块作用域1.2全局作用域<script>和js文件的最外层是全局作用域1.3作......