Vue3使用docx模板,導出為word文件的一系列坑。https://docxtemplater.readthedocs.io/(jquery搞這些就很舒服)


jquery時代word導出方案

那時候 很簡單
引入兩個js插件,
FileSaver.js、jquery.wordexport.js
確定一個div
點擊觸發下載了
代碼比較簡單
本文就不說了,筆者的博客中也有

vue2時代的word導出方案

一句話,使用docxtemplater
官網地址:
https://docxtemplater.readthedocs.io/
需要四五個插件?、
這個,好像比較接近答案
https://www.jianshu.com/p/0de31429b12a

vue3導出word,vue3沒有this怎么辦

這里涉及到VUE3里,好像更全面點
https://www.jianshu.com/p/b3622d6f8d98
這里的注釋多一點
https://www.cnblogs.com/hejun26/p/13647927.html

vue3的setup里是無法使用this的,那就用 getCurrentInstance代替this
https://blog.csdn.net/versionli/article/details/116658613

關於getcurrentInstance的詳細解釋
https://my.oschina.net/u/4355717/blog/4767509
最終的結論竟然是:
大家不要依賴 getCurrentInstance 方法去獲取組件實例來完成一些主要功能,否則在項目打包后,一定會報錯的。

要解決json字符串的換行問題和表單的循環渲染問題

1.字符串中加上\n,\r\n都不能換行。這是docxtemplater的問題
2.如何渲染表格

使用新的插件來生成docx文件

方法一、技術實現:fileSaver.js+html-docx-js
方法二、jQuery中的插件jquery.wordexport.js+fileSaver.js
https://www.cnblogs.com/younghxp/p/14918734.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM