vue.js - 使用html-docx.js插件，引入的样式无效？
获取要导出的两张表，写了css的样式，只有table的样式生效，其余都没有生效。
daochuWord() {
let contentHtml = document.getElementById("table1").innerHTML;
let content2Html = document.getElementById("table2").innerHTML;
let cssHTML = `
table td {
border: 3px red solid;
font-family: '宋体';
}
textarea {
border: none;
padding: 0;
margin: 0;
margin-top: 6px;
font-size: 16px;
}
table {
width: 100%;
border-collapse: collapse;
border: 2px #000 solid;
}
td {
padding: 0 6px;
text-align: center;
font-size:17px;
box-sizing: border-box;
}
.tal {
text-align: left;
}
.tac {
text-align: center;
}
.zong {
height: 5em;
display: inline-block;
}
.title {
text-align: center;
font-size: 32px;
letter-spacing: 15px;
margin: 11px 0;
color: #000;
font-family: '宋体';
font-weight: 400;
margin-bottom: 9px;
padding-left: 20px;
/* letter-spacing: 15px; */
}
.photo {
position: relative;
}
.photo img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.jianli {
width: 100px;
text-align: left;
vertical-align: baseline;
overflow: auto;
box-sizing: border-box;
}
`;
let content = `
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
${cssHTML}
</style>
</head>
<body>
<div class="title">干部任免审批表</div>
<table>
${contentHtml}
</table>
<table>
${content2Html}
</table>
<div class="cbr">出表人:</div>
</body>
</html>`此时打印出content，可以获取到拼接后的数据；但就是样式不生效；
let converted = htmlDocx.asBlob(content);
FileSaver.saveAs(converted, "干部任免表.docx");
}共有1个答案
在导出 Word 时，由于 Word 的样式不会直接读取你写在 HTML 中的样式，因此需要使用一些特殊的类和样式来将 HTML 样式应用于 Word。
在你提供的代码中，缺少了table-bordered和table-striped这两个类的定义。这两个类在 Bootstrap 中是用于设置表格边框和交替背景色的。如果你想使用这些类，需要先导入 Bootstrap 样式文件。
另外，由于 Word 使用的是不同的渲染引擎，一些 CSS 样式可能不支持（例如文本阴影等），因此有些样式可能无法在 Word 中生效。可以尝试使用 Word 中支持的样式
font-size 替换为字号，例如：font-size: 16px; -> font-size:16pt;；
margin 替换为页边距，例如：margin: 0 -> margin: 0pt；
padding 替换为内边距，例如：padding: 0 -> padding: 0pt。
下面是我修改后的代码
daochuWord() {
let contentHtml = document.getElementById("table1").innerHTML;
let content2Html = document.getElementById("table2").innerHTML;
let cssHTML = `
table td {
border: 3pt solid #FF0000;
font-family: '宋体';
}
textarea {
border: none;
padding: 0;
margin: 0;
margin-top: 6pt;
font-size: 16pt;
}
table {
width: 100%;
border-collapse: collapse;
border: 2pt solid #000000;
}
td {
padding: 0 6pt;
text-align: center;
font-size: 17pt;
box-sizing: border-box;
}
.tal {
text-align: left;
}
.tac {
text-align: center;
}
.zong {
height: 5em;
display: inline-block;
}
.title {
text-align: center;
font-size: 32pt;
letter-spacing: 15pt;
margin: 11pt 0;
color: #000;
font-family: '宋体';
font-weight: 400;
margin-bottom: 9pt;
padding-left: 20pt;
}
.photo {
position: relative;
}
.photo img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.jianli {
width: 100pt;
text-align: left;
vertical-align: baseline;
overflow: auto;
box-sizing: border-box;
}
/* 表格边框和交替背景色 */
.table-bordered td, .table-bordered th {
border: 2pt solid #000;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
`;
let content = `
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
${cssHTML}
</style>
</head>
<body>
<div class="title">干部任免审批表</div>
<table class="table-bordered table-striped">
${contentHtml}
</table>
<table class="table-bordered table-striped">
${content2Html}
</table>
<div class="cbr">出表人:</div>
</body>
</html>
`;
let converted = htmlDocx.asBlob(content);
FileSaver.saveAs(converted, "干部任免表.docx");
}在这个代码中，添加了.table-bordered和.table-striped这两个类，并定义了它们的边框和交替背景色。同时修改了一些样式单位和取值，例如将px替换为pt，并将字号统一为pt。你可以根据实际需要进行调整。
-
后端返回的数据里包含标签,需要解析标签后进行展示。因为展示实在多行文本框里展示 直接使用v-html，多行文本框样式也丢失了。 想到在插槽中展示,没找到el-input type="textarea"的插槽.
-
vue3 cdn引入怎么使用组件？
-
这是html中引入了Component main.js 中App.component注册了组件 mian.js 和 test.vue在同级目录下，现在页面没有报错也没有显示出 test.vue组件对应dom及内容，问题出在哪里了呢？ test.vue 内容
-
问题内容： 使用以下语法时，不必为每种类型的属性和事件繁琐地搜索解决方法： 有没有一种方法可以将整个HTML元素声明为字符串？喜欢： 问题答案： 创建片段然后插入该片段可能会更好，而不是直接弄乱它： 好处： 您可以使用本机DOM方法进行插入，例如insertBefore，appendChild等。 您可以在插入实际的DOM节点之前对其进行访问；您可以访问片段的childNodes对象。 使用文档片
-
我正在尝试使用PHP从HTML表单中插入数据到数据库中。我做了两个文件html表单和其他是PHP脚本。当我单击以html表单提交时，它显示给我php代码。我正在使用wamp服务器作为数据库。我将html文件放在C:/wamp64/www目录中，html文件放在本地目录中。数据库表为：id int(11)fname varchar(30)salary int(11)。Id不是自动递增的，它是主键。
-
主要内容：Vue.js class,class 属性绑定,实例 1,实例 2,实例 3,实例 4,实例 5,实例 6,,Vue.js style(内联样式),实例 7,实例 8,实例 9Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 class 属性绑定 我们可以为