我想復制 html 表的第二行以將其粘貼到 excel 檔案中。我的代碼與 Firefox 完美配合，我可以將其粘貼到 excel 中，一個表格單元格匹配一個 excel 單元格。但是，當使用chrome時，當我將代碼粘貼到excel中時，單元格不匹配，只保留表格單元格內的html。我正在使用 vue，這里是一個示例的鏈接：https ://playcode.io/910728
當 ref 寫入元素時它確實可以正常作業，但是我在復制的值中有標題，這是我不想要的。
這是我的代碼：
<script setup>
import {ref} from 'vue'
let matable = [
{ "name": "Link pic", "id": 34, "champ": "<p> Here is a link: <a href='www.google.com'> Link image</a> <br><br>" },
{ "name": "Source", "id": 16, "champ": "electricity" },
{ "name": "Generator", "id": 15, "champ": "Chaudière" },
{ "name": "Canton", "id": 1, "champ": "GE" },
{ "name": "City", "id": 2, "champ": "Paris" },
{ "name": "Numéro de rue", "id": 3, "champ": "72" },
{ "name": "Nom de rue", "id": 4, "champ": "Rue du Président" },
{ "name": "Surface facades", "id": 36, "champ": 2175.42 },
]
const elTable = ref(null)
defineExpose({ elTable });
function selectElementContents(){
let range, sel;
// Ensure that range and selection are supported by the browsers
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
// unselect any element in the page
sel.removeAllRanges();
try {
range.selectNodeContents(elTable.value);
sel.addRange(range);
} catch (e) {
range.selectNode(elTable.value);
sel.addRange(range);
}
document.execCommand('copy');
}
}
</script>
<template>
<h1>Hello Vue 3</h1>
<table ref="elTable">
<thead>
<th
v-for="ma in matable"
:key="ma.id">
{{ ma.name}}
</th>
</thead>
<tbody >
<tr >
<td v-for="ma in matable"
:key="ma.id"
v-html="ma.champ"
>
</td>
</tr>
</tbody>
</table>
<input type="button" value="Copier" class="button is-dark my-1" ref="copy" v-on:click="selectElementContents">
</template>
<style scoped>
</style>
我還嘗試使用剪貼板 api 為 chrome 構建一個特定的功能，但到目前為止沒有運氣。我確實復制了，但它沒有像 Firefox 版本那樣保持相同的單元格布局。這是試用：
function testCopy(){
let table = matable.map(a => a.champ);
let contentCo = table.join(" ");
console.log("voici ma table",contentCo)
navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
if (result.state === 'granted') {
var blob = new Blob([contentCo], {type: 'text/html'});
var item = new ClipboardItem({'text/html': blob});
navigator.clipboard.write([item]).then(function() {
console.log("Copied to clipboard successfully!");
}, function(error) {
console.error("unable to write to clipboard. Error:");
console.log(error);
});
} else {
console.log("clipboard-permission not granted: " result);
}
})
uj5u.com熱心網友回復：
我可能有一個解決方法。它并不完美，但它有效。
這個想法是在第一個表下添加第二個表，表的根目錄有 ref，然后用 css 將其隱藏。
<script setup>
import {ref} from 'vue'
let matable = [
{ "name": "Link pic", "id": 34, "champ": "<p> Here is a link: <a href='www.google.com'> Link image</a> <br><br>" },
{ "name": "Source", "id": 16, "champ": "electricity" },
{ "name": "Generator", "id": 15, "champ": "Chaudière" },
{ "name": "Canton", "id": 1, "champ": "GE" },
{ "name": "City", "id": 2, "champ": "Paris" },
{ "name": "Numéro de rue", "id": 3, "champ": "72" },
{ "name": "Nom de rue", "id": 4, "champ": "Rue du Président" },
{ "name": "Surface facades", "id": 36, "champ": 2175.42 },
]
function log() {
console.log(msg)
}
const elTable = ref(null)
defineExpose({ elTable });
function selectElementContents(){
let range, sel;
// Ensure that range and selection are supported by the browsers
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
// unselect any element in the page
sel.removeAllRanges();
try {
range.selectNodeContents(elTable.value);
sel.addRange(range);
} catch (e) {
range.selectNode(elTable.value);
sel.addRange(range);
}
document.execCommand('copy');
}
}
</script>
<template>
<h1>Hello Vue 3</h1>
<table>
<thead>
<th
v-for="ma in matable"
:key="ma.id">
{{ ma.name}}
</th>
</thead>
<tbody >
<tr>
<td v-for="ma in matable"
:key="ma.id"
v-html="ma.champ"
>
</td>
</tr>
</tbody>
</table>
<table ref="elTable" class="visually-hidden">
<tbody >
<tr >
<td v-for="ma in matable"
:key="ma.id"
v-html="ma.champ"
>
</td>
</tr>
</tbody>
</table>
<input type="button" value="Copier" class="button is-dark my-1" ref="copy" v-on:click="selectElementContents">
</template>
<style scoped>
.visually-hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489042.html
標籤：javascript html Vue.js 谷歌浏览器