Working with Vite in the browser 浏览器下 vite 下运行 promise 报错

xuri commented 1 year ago

Thanks for your feedback. Could you follow the issue template, and show us a complete, standalone example program or reproducible demo?

zhangchenna commented 1 year ago

0086/#/home:1 Uncaught (in promise) incorrect header check P

zhangchenna commented 1 year ago

import { init } from 'excelize-wasm'

onMounted(() => { init('./excelize.wasm.gz').then(excelize => { const f = excelize.NewFile(); console.log(f); }); });

zhangchenna commented 1 year ago

提示 Bad magic number node 版本正常浏览器运行报错

zhangchenna commented 1 year ago

export async function init(wasmPath) { const go = new Go(); let buffer; if (typeof window === 'undefined') { global.excelize = {}; } else { window.excelize = {}; } buffer = await (await fetch(wasmPath)).arrayBuffer(); const result = await WebAssembly.instantiate(buffer, go.importObject); go.run(result.instance); return excelize; }

把解压缩移除正常后浏览器就正常了怀疑是那个pako 的问题

zhangchenna commented 1 year ago

所有代码都是来自你的 demo 我并没有修改，我的代码是从 npm 包中提取

xuri commented 1 year ago

Thanks for your feedback. I've tested and it works well. Please try with following code:

<html>
<head>
  <meta charset="utf-8">
  <script src="https://xuri.me/excelize-wasm/v0.0.3/index.js"></script>
</head>
<body>
  <div>
    <button onclick="download()">Download</button>
  </div>
  <script>
  function download() {
    excelizeWASM
      .init('https://xuri.me/excelize-wasm/v0.0.3/excelize.wasm.gz')
      .then((excelize) => {
        const f = excelize.NewFile();
        // Create a new sheet.
        const { index } = f.NewSheet('Sheet2');
        // Set value of a cell.
        f.SetCellValue('Sheet2', 'A2', 'Hello world.');
        f.SetCellValue('Sheet1', 'B2', 100);
        // Set active sheet of the workbook.
        f.SetActiveSheet(index);
        // Save spreadsheet by the given path.
        const { buffer, error } = f.WriteToBuffer();
        if (error) {
          console.log(error);
          return;
        }
        const link = document.createElement('a');
        link.download = 'Book1.xlsx';
        link.href = URL.createObjectURL(
          new Blob([buffer], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          })
        );
        link.click();
      });
    }
  </script>
</body>

zhangchenna commented 1 year ago

Thanks for your feedback. I've tested and it works well. Please try with following code:

<html>
<head>
  <meta charset="utf-8">
  <script src="https://xuri.me/excelize-wasm/v0.0.3/index.js"></script>
</head>
<body>
  <div>
    <button onclick="download()">Download</button>
  </div>
  <script>
  function download() {
    excelizeWASM
      .init('https://xuri.me/excelize-wasm/v0.0.3/excelize.wasm.gz')
      .then((excelize) => {
        const f = excelize.NewFile();
        // Create a new sheet.
        const { index } = f.NewSheet('Sheet2');
        // Set value of a cell.
        f.SetCellValue('Sheet2', 'A2', 'Hello world.');
        f.SetCellValue('Sheet1', 'B2', 100);
        // Set active sheet of the workbook.
        f.SetActiveSheet(index);
        // Save spreadsheet by the given path.
        const { buffer, error } = f.WriteToBuffer();
        if (error) {
          console.log(error);
          return;
        }
        const link = document.createElement('a');
        link.download = 'Book1.xlsx';
        link.href = URL.createObjectURL(
          new Blob([buffer], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          })
        );
        link.click();
      });
    }
  </script>
</body>

有没有关于单元格样式的demo

const style = f.NewStyle({ Font: { Color: 'FFFFFF' }, Fill: { Type: 'pattern', Color: ['E0EBF5'] }, });

  console.log(style);

  f.SetColWidth('Sheet1', 'A', 'A', 50);
  f.SetColWidth('Sheet1', 'B', 'B', 30);
  f.SetRowStyle('Sheet1', 1, 1, style);
  f.SetCellStyle('Sheet1', 'A6', 'A6', style);

这么写不起做

xuri commented 1 year ago

Please reference the docs of the SetCellStyle function. Specify the Pattern field of the fill style.

xuri commented 1 year ago

I'll close this issue, if you have any questions, please let me know to reopen this anytime.

dearmark commented 1 year ago

export async function init(wasmPath) { const go = new Go(); let buffer; if (typeof window === 'undefined') { global.excelize = {}; } else { window.excelize = {}; } buffer = await (await fetch(wasmPath)).arrayBuffer(); const result = await WebAssembly.instantiate(buffer, go.importObject); go.run(result.instance); return excelize; }

把解压缩移除正常后浏览器就正常了怀疑是那个pako 的问题

Yes, it work. If someone use Vite and same problem ,just add to package.json

"excelize-wasm": "github:dearmark/excelize-wasm",

zhangchenna commented 1 year ago

export async function init(wasmPath) { const go = new Go(); let buffer; if (typeof window === 'undefined') { global.excelize = {}; } else { window.excelize = {}; } buffer = await (await fetch(wasmPath)).arrayBuffer(); const result = await WebAssembly.instantiate(buffer, go.importObject); go.run(result.instance); return excelize; }

把解压缩移除正常后浏览器就正常了怀疑是那个pako 的问题

Yes, it work. If someone use Vite and same problem ,just add to package.json
"excelize-wasm": "github:dearmark/excelize-wasm",

换了一个压缩控件就行，pako 自身的问题

dearmark commented 1 year ago

export async function init(wasmPath) { const go = new Go(); let buffer; if (typeof window === 'undefined') { global.excelize = {}; } else { window.excelize = {}; } buffer = await (await fetch(wasmPath)).arrayBuffer(); const result = await WebAssembly.instantiate(buffer, go.importObject); go.run(result.instance); return excelize; }

把解压缩移除正常后浏览器就正常了怀疑是那个pako 的问题

Yes, it work. If someone use Vite and same problem ,just add to package.json
"excelize-wasm": "github:dearmark/excelize-wasm",
换了一个压缩控件就行，pako 自身的问题

实际上，在部署到nginx时，我代码需要调用的是init('/wasm/excelize.wasm')，因为nginx开启了gzip压缩，配合使用Vite生成dist时，会自动生成excelize.wasm.gz文件；在我的使用场景里，无需提前使用.gz文件，nginx自动映射。

xuri / excelize-wasm

Working with Vite in the browser 浏览器下 vite 下运行 promise 报错 #7