前端写一个微信好友给你发的文件,怎么把这个文件展示在聊天记录里

要在聊天记录中展示微信好友发送的文件，你可以使用前端技术来实现。以下是一种可能的实现方式：

1. HTML 结构：

<div id="chat-container">
  <ul id="chat-messages"></ul>
</div>

2. CSS 样式：

#chat-container {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}

#chat-messages {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.message {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.message .sender {
  font-weight: bold;
  margin-right: 5px;
}

.message .file {
  background-color: #e6e6e6;
  padding: 10px;
  border-radius: 5px;
}

3. JavaScript 功能实现：

// 模拟聊天记录数据
const chatData = [
  {
    sender: '好友A',
    message: '文件发送',
    fileName: 'file1.pdf',
    fileSize: '2.5MB',
    fileUrl: 'https://example.com/file1.pdf'
  },
  {
    sender: '好友B',
    message: '文件发送',
    fileName: 'file2.jpg',
    fileSize: '1.2MB',
    fileUrl: 'https://example.com/file2.jpg'
  },
  // 其他聊天记录
];

// 获取聊天容器和消息列表元素
const chatContainer = document.getElementById('chat-container');
const chatMessages = document.getElementById('chat-messages');

// 循环遍历聊天记录数据并创建消息元素
chatData.forEach((messageData) => {
  const messageElement = document.createElement('li');
  messageElement.classList.add('message');

  const senderElement = document.createElement('span');
  senderElement.classList.add('sender');
  senderElement.textContent = messageData.sender;

  const fileElement = document.createElement('div');
  fileElement.classList.add('file');

  const fileNameElement = document.createElement('span');
  fileNameElement.textContent = messageData.fileName;

  const fileSizeElement = document.createElement('span');
  fileSizeElement.textContent = messageData.fileSize;

  const linkElement = document.createElement('a');
  linkElement.href = messageData.fileUrl;
  linkElement.target = '_blank';
  linkElement.textContent = '下载文件';

  fileElement.appendChild(fileNameElement);
  fileElement.appendChild(fileSizeElement);
  fileElement.appendChild(linkElement);

  messageElement.appendChild(senderElement);
  messageElement.appendChild(fileElement);

  chatMessages.appendChild(messageElement);
});

// 滚动到最新消息
chatContainer.scrollTop = chatContainer.scrollHeight;

通过以上代码，你可以在聊天记录中展示微信好友发送的文件。你只需要将聊天记录数据替换为实际数据，并将文件的相关信息（文件名、文件大小、文件链接）传入对应的属性即可。请注意在 CSS 中进行样式调整以适应你的需求。