网站运营管理办法,南昌地宝网免费发布,平面电商设计是什么,phpstorm做网站因为html-docx-js是16年的老库了#xff0c;它代码里面用到的with语法现在严格模式不允许#xff0c;用npm直接引入会报错#xff0c;所以我们需要用其它方式引入
首先要将html-docx-js的代码放到项目中
html-docx-js/dist/html-docx.js at master evidenceprime/html-do…因为html-docx-js是16年的老库了它代码里面用到的with语法现在严格模式不允许用npm直接引入会报错所以我们需要用其它方式引入
首先要将html-docx-js的代码放到项目中
html-docx-js/dist/html-docx.js at master · evidenceprime/html-docx-js · GitHub
我这边的vue项目所以放到public文件下 代码里面几个with的用法需要改一下因为现在都是默认严格模式了
全局搜一下with(然后把涉及到的都改成类似如下的即可 接下来到项目的html文件中使用script标签引入 如果使用typescript需要声明一下全局变量
export declare global {interface Window {htmlDocx: anysaveAs: (doc: any, name: string) void}
}这样子就可以在项目中愉快的使用了~使用方法如下
// 需要打印的dom元素
const areaRef ref()const handleDownload () {const cssText th, td {border-color: red;}const content !DOCTYPE htmlhtmlheadstyle${cssText}/style/headbody${areaRef.value.outerHTML}/body/htmlconst converted window.htmlDocx.asBlob(content, {orientation: landscape,})window.saveAs(converted, test.docx)
}
PS如果遇到样式问题的话比如图片宽高需要使用img标签的width和height属性字体大小需要使用pt不生效的话可以先把对应的docx模板转成html查看样式后再对应进行修改
docx转html网站
