Angular中XML关联XSL样式无法生效问题求助

我开发了一个工具，可接收用户输入，点击保存后生成XML文件并存储在assets目录，同时创建了用于设置模板和样式的XSL文件也保存在该目录。预期在Angular页面中展示应用XSL样式后的XML，但实际页面中XML未应用样式。手动在Chrome中打开该XML文件时，样式正常显示；但执行ng serve加载组件时，XML无样式展示。

相关代码参考 #

generate-xml.component.ts #

onGenerateXMLClicked() {    
    const doc = document.implementation.createDocument("", "", null);
    const mainElem = doc.createElement("catalog");    
    const titleElem = doc.createElement("title");
    titleElem.textContent = 'Empire Burlesque';    
    const artistElem = doc.createElement("artist");
    artistElem.textContent = 'Bob Dylan';    
    const countryElem = doc.createElement("country");
    countryElem.textContent = 'USA';    
    mainElem.appendChild(titleElem);
    mainElem.appendChild(artistElem);
    mainElem.appendChild(countryElem);    
    var str_data = 'data:text/xml;charset=utf-8,' + encodeURIComponent(mainElem.outerHTML);    
    var anchor = document.createElement('a');
    anchor.setAttribute("href", str_data);
    anchor.setAttribute("download", 'world.xml');
    anchor.click();
    anchor.remove();
  }

world.xml #

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="./template.xsl"?>
<catalog>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
</catalog>

template.xsl #

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="catalog">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

display-xml.html #

<div [innerHTML]="myTemplate"></div>

display-xml.ts #

ngOnInit() {

    fetch('/assets/data/world.xml').then(res => res.text()).then(data => {
      this.myTemplate = this.sanitizer.bypassSecurityTrustHtml(data);

      const parser = new DOMParser();
      const xml = parser.parseFromString(data, 'application/xml');
      const questionSet = xml.documentElement;
      
      this.myTemplate = this.sanitizer.bypassSecurityTrustHtml(data);

    });
  }

解决方案 #

直接将XML文本插入HTML页面时，浏览器不会自动解析并应用XML中的XSL样式声明——这只有在直接加载XML文档时才会触发。要在Angular中展示应用XSL后的效果，需要手动执行XSL转换，将XML转为HTML后再渲染。

修改display-xml.ts代码如下：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-display-xml',
  templateUrl: './display-xml.html',
  styleUrls: ['./display-xml.css']
})
export class DisplayXmlComponent implements OnInit {
  myTemplate: SafeHtml | undefined;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
    // 同时获取XML和XSL文件内容
    Promise.all([
      fetch('/assets/data/world.xml').then(res => res.text()),
      fetch('/assets/data/template.xsl').then(res => res.text())
    ]).then(([xmlText, xslText]) => {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
      const xslDoc = parser.parseFromString(xslText, 'application/xml');

      // 创建XSLT处理器并加载样式表
      const xsltProcessor = new XSLTProcessor();
      xsltProcessor.importStylesheet(xslDoc);

      // 执行转换，得到HTML文档
      const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
      const resultHtml = new XMLSerializer().serializeToString(resultDoc);

      // 安全处理后赋值
      this.myTemplate = this.sanitizer.bypassSecurityTrustHtml(resultHtml);
    }).catch(err => {
      console.error('加载或转换文件失败:', err);
    });
  }
}

关键说明： #

• 使用Promise.all同时获取XML和XSL文件内容，确保两者都加载完成后再进行转换
• 通过DOMParser分别解析XML和XSL为DOM文档
• 利用XSLTProcessor执行转换，将XML转为XSL定义的HTML结构
• 用XMLSerializer将转换后的DOM文档转为HTML字符串，再经过安全处理后绑定到模板

内容的提问来源于stack exchange，提问作者Asif Zaidi