用JavaScript在前端页面中展示excel、cvs、pdf文件的代码

在前端页面中展示 Excel、CSV 和 PDF 文件需要使用相应的插件或库来实现。以下是一些常用的库和方法的示例：

1. 使用 `<iframe>` 元素展示 PDF 文件：

<iframe src="path/to/file.pdf" width="100%" height="600px"></iframe>

这会在页面上嵌入一个用于展示 PDF 文件的 `<iframe>` 元素。

2. 使用第三方库来展示 Excel 和 CSV 文件，比如 SheetJS：

<!-- 引入 SheetJS 库 -->
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

<!-- 选择文件的 input 元素 -->
<input type="file" id="fileInput">

<!-- 用于展示表格的容器 -->
<div id="tableContainer"></div>

<!-- JavaScript 代码 -->
<script>
  document.getElementById('fileInput').addEventListener('change', function(evt) {
    var file = evt.target.files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
      var data = new Uint8Array(e.target.result);
      var workbook = XLSX.read(data, { type: 'array' });

      var sheetName = workbook.SheetNames[0];
      var worksheet = workbook.Sheets[sheetName];

      var tableHtml = XLSX.utils.sheet_to_html(worksheet);
      
      document.getElementById('tableContainer').innerHTML = tableHtml;
    };

    reader.readAsArrayBuffer(file);
  });
</script>

这段代码使用 SheetJS 库来读取 Excel 文件，并将其转换为 HTML 表格。当用户选择文件后，通过 `FileReader` 对象读取文件内容，并使用 SheetJS 的方法将其转换为 HTML 表格，并将表格内容展示在指定的容器中。

请注意，这只是一种展示 Excel、CSV 和 PDF 文件的方法，你可以根据需要选择合适的库或插件，并根据具体情况进行调整。