前端把后端多个数据分转换成元渲染在页面上，最后再元转分至后端保存，点击保存的时候调用api.js的文件，代码实现

以下是一个简单的实现，前端使用JavaScript实现数据的转换和API调用：

// 元转分
function yuanToFen(yuan) {
  return yuan * 100;
}

// 分转元
function fenToYuan(fen) {
  return fen / 100;
}

// 从后端获取数据
function getDataFromBackend() {
  // 调用后端API接口，获取数据
  // 这里假设后端返回的数据格式为 {data: {a: 1000, b: 2000, c: 3000}}
  return {a: 1000, b: 2000, c: 3000};
}

// 将数据渲染到页面上
function renderDataToPage(data) {
  // 将数据转换为元并渲染到页面上
  document.getElementById('a').value = fenToYuan(data.a);
  document.getElementById('b').value = fenToYuan(data.b);
  document.getElementById('c').value = fenToYuan(data.c);
}

// 保存数据
function saveData() {
  // 将用户输入的元数据转换为分
  const a = yuanToFen(document.getElementById('a').value);
  const b = yuanToFen(document.getElementById('b').value);
  const c = yuanToFen(document.getElementById('c').value);

  // 调用后端API接口，保存数据
  // 这里假设api.js文件中的接口函数为 saveData，传递的参数为 {a: 1000, b: 2000, c: 3000}
  api.saveData({a, b, c}).then(response => {
    console.log('数据保存成功');
  }).catch(error => {
    console.error('数据保存失败', error);
  });
}

// 初始化页面
function initPage() {
  // 从后端获取数据
  const data = getDataFromBackend();

  // 将数据渲染到页面上
  renderDataToPage(data);
}

// 页面加载完成后执行初始化操作
window.onload = function() {
  initPage();
}

以上代码中，`yuanToFen`和`fenToYuan`函数分别用于元和分之间的转换，`getDataFromBackend`函数用于调用后端API接口获取数据，`renderDataToPage`函数用于将数据渲染到页面上，`saveData`函数用于保存数据。在页面加载完成后，我们会调用`initPage`函数初始化页面。

需要注意的是，以上代码中使用了`api.js`文件中的`saveData`函数调用后端API接口，需要确保`api.js`文件中的接口函数定义正确，并且与后端API接口的地址和参数设置相匹配。同时，为了防止跨站请求伪造攻击（CSRF），我们在提交数据时需要设置请求头的`Content-Type`为`application/json`，并将数据转换为JSON格式。